vue element table,vue el-table
主要介绍了在vue elementUI中实现嵌入式表格的方法示例，通过示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
大四实习的时候，我遇到了一个特殊的需求，需要我点击一个表格table中的一条数据的编号，这条数据的下方就会出现一个新的table表格。这个需求在element UI的官方文档中也有所体现。以下是参考其他博客(找不到博客地址)和element UI后的最终实现效果。
翻译
不知道是公司电脑太慢还是软件问题导致录制的动态画面卡顿，但实际操作时不会卡顿。
代码：
页面显示代码：
主要代码在于El-table-column type= expand width= 1 type= expand 。官方解释：通过设置type= expand 和Scoped slot，El-table-column的模板将被渲染为扩展行的内容，使用自定义列模板时，扩展行的可访问属性与Scoped slot的属性相同。
最后，在el-table-column设置为type=expand by width=1 后，显示的箭头图标被隐藏。
整个代码流程大致如下：
数据表分为主表和子表。当页面开始加载时，显示主表数据(即常用表数据表称为主表)。当我单击主表中一行数据的导航名称时，会触发一个单击事件toogleExpand()。这个事件的主要作用是根据点击数据的ID去后台找到对应的子表数据，并返回给前端。最后前端显示出来。
这个过程中更值得注意的是如何将对应数据的子表数据与主表数据一一绑定。
我使用Map实现了这一点，主表ID作为键，子表数据作为值。
//使用映射结构保存翻译列表
这个。WebsiteLangMap.set(id，response.rows)
在这一点上，还有一个问题。
页面刚加载的时候，第一次点击打开对应的嵌入式表格是没有数据的，只有第二次点击打开才会有数据。
因为我们在第一次呈现table时保存的子表数据的映射没有数据，所以第一次单击不会显示数据(如何在没有数据的情况下呈现)。而我们得到的数据就是在触发了toogleExpand()的click事件之后会被请求的数据。也就是说，首先呈现数据。本来我以为它可以像监听器一样实时监控数据的变化，渲染页面，但是它不能。
解决方法是：控制el-table的key属性，当子表中的数据发生变化时，key的值也会发生变化。
this.websiteLangTableKey=！this.websiteLangTableKey
以下是核心代码：
el表
垂直加载=“加载”
:data=网站列表
@ selection-change= handleSelectionChange
ref=table
key=websiteTable
row-key=id
style= width:100%； maigin-bottom:20px；
边界
El-table-column type= selection width= 55 align= center /
！-El-table-column:label= TD( primary key ) align= center prop= id /-
El-table-column :label=td(上级导航) align=center prop=parentId/
El-table-column :label=td(导航名称) align=center prop=barName
模板槽-范围=“范围”
El-link type= primary :underline= false @ click= toogle expand(scope . row)
{{scope.row.barName}}
/el-link
/模板
/El-表格-列
El-table-column:label= TD( link ) align= center prop= is link /
El-table-column :label=td(链接地址) align=center prop=url/
El-table-column :label=td(创建日期) align= center prop= create time /
El-table-column:label= TD( create user ) align= center prop= create by /
El-table-column :label=td(更新时间) align= center prop=更新时间/
el-table-column :label=td(更新用户) align=center prop=updateBy /
el-table-column :label=td(备注) align=center prop=remark /
el-table-column :label=td(操作) align= center width= 130 class-name=小填充固定宽度固定=右
模板槽-范围="范围"
埃尔按钮
size=mini
type=text
icon=el-icon-edit
@click=handleUpdate(scope.row)
v-hasPermi=[ CMS:website:edit ]
{{td(修改)}} /el按钮
埃尔按钮
size=mini
type=text
icon=el-icon-delete
@click=handleDelete(scope.row)
v-hasPermi=[ CMS:website:remove ]
{{td(删除)}}/el按钮
/模板
/El-表格-列
El-table-column type= expand width= 1
模板槽-范围="范围"
埃尔表
垂直加载="加载"
style=宽度：100%
row-key=langId
:key=websiteLangTableKey
:data= websitelangmap。获取(范围。划。id)
class=表中的表
！- el-table-column :label=td(ID主键) align=center prop=langId/-
！- el-table-column :label=td(导航ID ) align= center prop= webId /-
el-table-column :label=td(语言编号) align=center prop=langCode /
el-table-column :label=td(语言名称) align=center prop=langName /
el-table-column :label=td(中文) align=center prop=langCn /
el-table-column :label=td(语言翻译) align= center prop= lang translate /
el-table-column :label=td(备注) align=center prop=remark /
el-table-column :label=td(操作) align= center width= 130 class-name=小填充固定宽度固定=右
模板槽-范围="范围"
埃尔按钮
size=mini
type=text
icon=el-icon-edit
@ click= handleUpdateLang(范围。行)
v-hasPermi=[ CMS:website lang:edit ]
{{td(修改)}} /el按钮
埃尔按钮
size=mini
type=text
icon=el-icon-delete
@ click= handleDeleteLang(范围。行)
v-hasPermi=[ CMS:website lang:remove ]
{{td(删除)}}/el按钮
/模板
/El-表格-列
/el-table
/模板
/El-表格-列
/el-table
//内嵌桌子
toogleExpand(row) {
这个。getlist lang(row。id)；
让$table=this .$ refs.table
$table.toggleRowExpansion(row)
},
/** 查询导航翻译列表*/
getListLang(id) {
//根据导航身份获取翻译列表
这个LangQueryParams.webId=id
listWebsiteLang(这个LangQueryParams)。然后(响应={
//使用地图结构的方式保存翻译列表
这个WebsiteLangMap.set(id，response.rows)
this.websiteLangTableKey=！this.websiteLangTableKey
这个。resetlang()；
});
},
样式lang=scss 范围。应用程序容器{
*五型深{。埃尔-表th {
背景：# ddeeff
}。El-表_ _扩展单元格{
边框-底部：0px
边框-右边：0px
填充：0px 0px 0px 47px
}
}。表中表{
border-top:0px；
}
}
/风格
到此这篇关于某视频剪辑软件元素实现内嵌桌子的方法示例的文章就介绍到这了，更多相关某视频剪辑软件元素内嵌桌子内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。