Posted in Vue.js onApril 13, 2022
需求:后端返回全部列数据。前端根据选项来显示对应的列,如果不勾选,默认全部隐藏。
效果图
勾选后显示对应的列
上代码
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表格控制对应列
- Author -
接口写好了吗- Original Sources -
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@