elementui table隐藏列,element table隐藏列
这篇文章主要为大家详细介绍了vueelementUI表格控制显示隐藏对应列的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素表格控制显示隐藏对应列的具体代码，供大家参考，具体内容如下
需求：后端返回全部列数据。前端根据选项来显示对应的列，如果不勾选，默认全部隐藏。
效果图
勾选后显示对应的列
上代码
html部分
这里用控制显示来显示隐藏，因为这个元素组件的原因，五秀不生效，要用控制显示
埃尔-表格-列
v-if=列出了[0]。 ispass
label=Upper
prop=db28
显示溢出工具提示
/El-表格-列
埃尔-表格-列
v-if=列表[1]。 ispass
label=Lower
prop=db31
显示溢出工具提示
/El-表格-列
埃尔-表格-列
v-if=列表[2]。 ispass
标签=向上向下
prop=db34
显示溢出工具提示
/El-表格-列
埃尔-表格-列
v-if=列表[3]。 ispass
标签="静态"
prop=db36
key=1
显示溢出工具提示
/El-表格-列
埃尔-表格-列
v-if=列表[4]。 ispass
label=LRO-T1 OA
最小宽度=90px
prop=db44
key=2
显示溢出工具提示
/El-表格-列
data部分
是否通过是用来控制显示或隐藏的，标签是用来判断的。
列表：[
{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}，
{标签: LRO-T1建筑，ispass:false}，
{标签: LRO-T2 别克，ispass:false}，
{标签: LRO-B1建筑，ispass:false}，
{标签: LRO-B2 别克，ispass:false}，
{标签: LRO-T1凹痕，ispass:false}，
{标签: LRO-T2 登特，ispass:false}，
{标签: LRO-B1凹痕，ispass:false}，
{标签: LRO-B2 登特，ispass:false}，
],
检查：[
上部，
较低，
向上你好，
静态，
LRO-t10a ，
LRO-T2 OA ，
LRO-b10a ，
LRO-B2 OA ，
RRO-C OA ，
LRO-T1大楼，
LRO-T2建筑公司，
LRO B1建筑，
LRO-B2建筑公司，
LRO-T1登特，
LRO-T2登特，
LRO B1登特，
LRO-B2登特，
],
清单：[
],
方法部分
直接用看监听，复制就行。这里注意清单和支票
清单：代表你多选框的默认选中，我没写就是默认全不选
检查：这个也要写和列表里的标签一样，用来判断的。
观察：{
清单（新价值){
if (newVal) {
var arr=this。检查。过滤器(I=新值。(I)0的索引)//未选中
this.lists.map(i={
if (arr.indexOf(i.label)！==-1) {
i.ispass=false
}否则{
i.ispass=true
}
})
}
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。