element table 动态列,elementui table 动态列
这篇文章主要介绍了某视频剪辑软件元素表表格实现动态列筛选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求：在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，用户使用起来可能会觉得抓不住自己的重点。
设想实现：用户手动选择表格的列隐藏还是展示，并且记录用户选择的状态，在下次进入该时仍保留选择的状态。
效果图如下：
原：
不需要的关掉默认的勾选：
实现代码：
超文本标记语言部分就是用一个多选框组件展示列选项
用v-if=colData[i].伊斯特鲁控制显示隐藏，把列选项传到检验盒里再绑定勾选事件。
El-popover placement= right title=列筛选触发器=点击宽度=420
El-checkbox-group v-model=选中的列 size= mini
El-checkbox v-for=复选框组中的项目:key= item :label= item :value= item /El-checkbox
/el-checkbox-group
El-button slot= reference type= primary size= small plaini class= El-icon-arrow-down El-icon-menu /列表项展示筛选/el-button
/el-popover
El-table:data= attendanceList @ sort-change= sort highlight-current-row:row-class-name= holiday row @ selection-change= editAll ref= multiple table
埃尔-表格列type= selection width= 55 align= center /El-表格列
埃尔-表格-列标签=员工基本信息
El-table-column v-if= colData[0].为true align= center prop= user _ id label=工号宽度=80 固定/El-表格-列
El-table-column v-if= colData[1].为true align= center prop= name label=姓名宽度=80 固定/El-表格-列
El-table-column v-if= colData[2].为真 align= center prop= age label=年龄宽度= 60 /El-表格-列
El-table-column v-if= colData[3].为真 align= center prop= gender label=性别宽度= 80 /El-表格-列
El-table-column v-if= colData[4].为真 align= center prop= department label=部门名称宽度= 100 /El-表格-列
/El-表格-列
.
射流研究…数据存放的数据部分
//列表动态隐藏
colData: [
{标题： 工号，istrue: true }，
{标题： 姓名，istrue: true }，
{标题： 年龄，istrue: true }，
{标题： 性别，istrue: true }，
{标题： 部门名称，istrue: true }，
],
复选框组：[],
检查的列：[],
射流研究…方法实现部分
已创建(){
//列筛选
this.colData.forEach((item，index)={
这个。复选框组。推(项。标题)；
这个。选中的列。推(项。标题)；
})
这个。选中的列=this。选中的列
让un数据=本地存储。getitem(这个。coltable)
UnData=JSON.parse(UnData)
如果(UnData！=null) {
这个。选中的列=this。选中的列。过滤器((项目)={
回归！数据包括(项目)
})
}
},
//监控列隐藏
观察：{
检查的列(值，值){
设arr=这个。复选框组。过滤器(I=！价值包括)；//未选中
本地存储。setitem(这个。coltable，JSON.stringify(arr))
this.colData.filter(i={
if (arr.indexOf(i.title)！=-1) {
i.istrue=false
}否则{
i.istrue=true
}
});
}
},
这样就可以实现了，并且在刷新页面等会记录勾选情况，本来想加一个全选的选择框，最后没实现，先这样用吧。但是肯定有更好的方法，以后优化了再更新~
到此这篇关于某视频剪辑软件元素表表格实现动态列筛选的示例代码的文章就介绍到这了，更多相关元素表表格动态列筛选内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。