el table column 动态 隐藏,el-table 动态显示列
这篇文章主要介绍了某视频剪辑软件实现动态控制埃尔表表格列的展示与隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件动态控制埃尔表表格列的展示与隐藏的具体代码，供大家参考，具体内容如下
1.引入el-table组件，这里我直接用官网的示例代码
模板
div class=page
el-popover宽度=60 触发器=点击
El-checkbox-group v-model= column selected s
El-checkbox v-表示=列标题中的项目:label= item。 title :key= item。标题/El-复选框
/el-checkbox-group
El-button slot= reference icon= El-icon-more circle style= margin-left:100 px；/el-button
/el-popover
埃尔表
:data=tableData
ref=dataTable
种类
style=宽度：100%
El-table-column v-if=列标题[0].isShow prop=date label=日期/El-表格-列
El-table-column v-if=列标题[1].isShow prop=name label=姓名/El-表格-列
El-table-column v-if=列标题[2].isShow prop=address label=地址/El-表格-列
/el-table
/div
/模板
页面效果图：
2.数据绑定与监听
脚本
导出默认值{
名称： ElTableTest ，
data() {
返回{
//表格数据
表数据：[{
日期："2016年5月2日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1518 弄
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1517 弄
}, {
日期："2016年5月一日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1519 弄
}, {
日期："2016年5月3日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1516 弄
}],
//表头信息
列标题：[
{索引：0,标题： 日期，isShow: true}，
{索引：1,标题： 姓名，isShow: true}，
{索引：2,标题： 地址，isShow: true}
],
//已选择的项
columnSelecteds: [日期,姓名, 地址]
}
},
观察：{
/**
* @title监听列显示隐藏
*/
columnSelecteds(newArrayVal) {
//计算为被选中的列标题数组
未选择的变量=this。列标题。过滤器(item=newarrayval。(项目的索引。title)==-1)。地图(项目=项目.标题)
//根据计算结果进行表格重绘
这个。列标题。过滤器(项目={
let is non selected=non selected s . index of(item。标题)！=-1
if (isNonSelected) {
//隐藏未选中的列
item.isShow=false
这个. nextTick(()={
这个. refs.dataTable.doLayout()
})
}否则{
//显示已选中的列
item.isShow=true
这个. nextTick(()={
这个. refs.dataTable.doLayout()
})
}
})
}
}
}
/脚本
监听到已选择和未选择的列，调用doLayout()方法对表格进行重绘。
最终效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。