vue 表格隐藏列,vue 控制显示隐藏
本文主要详细介绍了Vue对动态控制表列的显示和隐藏。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue实现动态控制表列显示和隐藏的具体代码，供大家参考。具体内容如下
效果如图所示：
标题是重复的，以便看到滚动效果。
V-if="lists [0]。ispass”来判断每一列是显示还是隐藏。选中以显示，取消选中以隐藏，默认情况下选中。
El-drop down:hide-on-click= false
I class= icon font icon-shaixuan /I
El-drop down-菜单slot=dropdown
El-scroll bar style= height:60VH //作用是数据过多可以固定表单数据的整体高度，多余的区域可以通过下拉显示。
El-复选框-组v-模型=检查
el-dropdown-item v-for=(item，index)in check list :key= index El-checkbox:label= item :key= item /El-checkbox
/El-下拉列表项
/el-checkbox-group
/El-滚动条
/El-下拉菜单
/El-下拉列表
El-table:data= institutional typelist border align= center v-loading= list loading style= width:100%；:header-cell-style=tableBg
af-table-column type= index :index= index method label=序列号 width=90
/af-表格-列
Af-table-column v-if=列出[0]。ispass prop= id label= encoding
/af-表格-列
Af-table-column v-if= lists [1]。ispass prop= name label= name
/af-表格-列
Af-table-column v-if= lists [2]。ispass prop=更新时间 label=更新时间
/af-表格-列
/el-table
列表是所有的标题，复选框是默认选择的多选框，清单也是所有标题绑定到多选框。
data() {
返回{
检查：[代码，名称，更新时间]，
清单：[代码，名称，更新时间]，
列表：[
{label: code ，ispass:true}，
{label: name ，ispass:true}，
{label:更新时间，ispass:true}，
],
}
},
动态监控值选定选项
观察：{
检查(新值){
if (newVal) {
var arr=this . check list . filter(I=new val . index of(I)0)//未选择
this.lists.map(i={
if (arr.indexOf(i.label)！==-1) {
i.ispass=false
}否则{
i.ispass=true
}
})
}
}
},
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。