1.效果如图
v-if=“lists[0].ispass” 来判断表格列的状态每一列是否显示或隐藏 勾选则展示、取消勾选隐藏、默认勾选
2.代码
<el-dropdown :hide-on-click="false"><i class="iconfont icon-shaixuan" ></i><el-dropdown-menu slot="dropdown" ><el-scrollbar style="height: 60vh">//作用是数据过多把表单数据的整体高度固定、多出的区域可以下拉展示<el-checkbox-group v-model="check"><el-dropdown-item v-for="(item,index) in checkList" :key="index"><el-checkbox :label="item" :key="item"></el-checkbox></el-dropdown-item></el-checkbox-group></el-scrollbar></el-dropdown-menu></el-dropdown><el-table :data="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:'编码',prop:'id',ispass:true},{label:'名称',prop:'name',ispass:true},{label:'更新时间',prop:'updatetime',ispass:true},],}},
动态监听值选中的选项
watch:{check(newVal){if (newVal) {var arr = this.checkList.filter(i => newVal.indexOf(i) < 0) //未选中this.lists.map(i => {if (arr.indexOf(i.label) !== -1) {i.ispass = false} else {i.ispass = true}})}}},
相关资源:/download/weixin_38647039/12953541?spm=1001.2101.3001.5697
