vue elementUI表格控制显示隐藏对应列的方法
时间：2022-07-01 09:47:30 | 栏目：vue | 点击：次
本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码，供大家参考，具体内容如下
需求：后端返回全部列数据。前端根据选项来显示对应的列，如果不勾选，默认全部隐藏。
效果图
勾选后显示对应的列
上代码
html部分
这里用v-if来显示隐藏，因为这个elementul组件的原因，v-show不生效，要用v-if
<el-table-column v-if="lists[0].ispass" label="Upper" prop="db28" show-overflow-tooltip ></el-table-column> <el-table-column v-if="lists[1].ispass" label="Lower" prop="db31" show-overflow-tooltip ></el-table-column> <el-table-column v-if="lists[2].ispass" label="UP+LOW" prop="db34" show-overflow-tooltip ></el-table-column> <el-table-column v-if="lists[3].ispass" label="Static" prop="db36" key="1" show-overflow-tooltip ></el-table-column> <el-table-column v-if="lists[4].ispass" label="LRO-T1 OA" min-width="90px" prop="db44" key="2" show-overflow-tooltip > </el-table-column>
data部分
ispass是用来控制显示或隐藏的，label是用来判断的。
lists:[
{label:'Upper',ispass:false},
{label:'Lower',ispass:false},
{label:'UP+LO',ispass:false},
{label:'Static',ispass:false},
{label:'LRO-T1 OA',ispass:false},
{label:'LRO-T2 OA',ispass:false},
{label:'LRO-B1 OA',ispass:false},
{label:'LRO-B2 OA',ispass:false},
{label:'RRO-C OA',ispass:false},
{label:'LRO-T1 Buige',ispass:false},
{label:'LRO-T2 Buige',ispass:false},
{label:'LRO-B1 Buige',ispass:false},
{label:'LRO-B2 Buige',ispass:false},
{label:'LRO-T1 Dent',ispass:false},
{label:'LRO-T2 Dent',ispass:false},
{label:'LRO-B1 Dent',ispass:false},
{label:'LRO-B2 Dent',ispass:false},
],
check:[
"Upper",
"Lower",
"UP+LO",
"Static",
"LRO-T1 OA",
"LRO-T2 OA",
"LRO-B1 OA",
"LRO-B2 OA",
"RRO-C OA",
"LRO-T1 Buige",
"LRO-T2 Buige",
"LRO-B1 Buige",
"LRO-B2 Buige",
"LRO-T1 Dent",
"LRO-T2 Dent",
"LRO-B1 Dent",
"LRO-B2 Dent",
],
checkList: [
],
方法部分
直接用watch监听，复制就行。这里注意checkList和check
checkList：代表你多选框的默认选中，我没写就是默认全不选
check：这个也要写和lists里的label一样，用来判断的。
watch:{
checkList(newVal){
if (newVal) {
var arr = this.check.filter(i => newVal.indexOf(i) < 0) //未选中
this.lists.map(i => {
if (arr.indexOf(i.label) !== -1) {
i.ispass = false
} else {
i.ispass = true
}
})
}
}
},