Vue实现动态控制表格列的显示和隐藏

本文实例为大家分享了vue实现动态控制表格列的显示和隐藏的具体代码，供大家参考，具体内容如下

效果如图：

表头标题是重复的、为了能看到滚动效果

"institutionalTypeList" border align="center" v-loading="listLoading" style="width: 100%;" :header-cell-style="tableBg"> <af-table-column type="index" :index="indexMethod" label="序号" width="90"> </af-table-column> <af-table-column v-if="lists[0].ispass" prop="id" label="编码" > </af-table-column> <af-table-column v-if="lists[1].ispass" prop="name" label="名称" > </af-table-column> <af-table-column v-if="lists[2].ispass" prop="updatetime" label="更新时间" > </af-table-column></el-table>

lists是所有表头标题，check是多选框默认全选，checkList也是所有表头标题、跟多选框绑定的

data() {   return {    check:['编码','名称','更新时间'],    checkList:['编码','名称','更新时间'],    lists:[     {label:'编码',ispass:true},     {label:'名称',kList.filter(i => newVal.indexOf(i) < 0) //未选中       this.lists.map(i => {        if (arr.indexOf(i.label) !== -1) {         i.ispass = false        } else {         i.ispass = true        }       })      }   }},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。