这篇文章主要介绍“vue elementUI表格控制怎么显示隐藏对应列”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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
}
})
}
}
},关于“vue elementUI表格控制怎么显示隐藏对应列”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
