在这篇文章中，我们来学习一下“vue中怎样用elementul组件实现对表格的列控制”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

需求：后端返回全部列数据。前端根据选项来显示对应的列，如果不勾选，默认全部隐藏。

效果图

勾选后显示对应的列

上代码

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中怎样用elementul组件实现对表格的列控制"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue响应式原理如何理解，实现过程是怎样的

  Vue 最独特的特性之一,是其非侵入性的响应式系统。下面这篇文章主要给大家介绍了关于vue响应式原理与双向数据的相关资料,需要的朋友可以参考下

• webpack如何进行安装和配置，用法是什么

  目录一、webpack介绍1、由来2、介绍3、作用4、拓展说明5、webpack整体认知二、webpack安装1、安装node2、安装cnpm3、安装nrm的两种方法4、安装webpack三、webpack配置0、搭建项目结构1、初始化一个项目（会创建一个package.json文件）2、在当前的项目中安装Webpac

• TypeScript遍历对象属性报错怎么办，如何处理

  这篇文章主要介绍了TypeScript遍历对象属性的问题，文章围绕TypeScript遍历对象属性的相关资料展开详细内容,需要的朋友可以参考一下

• JS内存泄漏是什么意思，怎样防止这个情况？

  这篇我们来了解关于JS内存泄漏的相关内容，对于JS内存泄漏以及其影响有很多朋友是不知道，JS内存泄漏对我们正常的程序运行是有很大影响的，对此下文就给大家来解决JS内存泄漏和如何防止内存泄漏。

• Vue3模板编译原理是什么？浅谈Vue编译的过程

  本文主介绍的是Vue3模板编译的内容，一些朋友可能对于Vue 的编译不是很了解，对此本文会给大家来介绍一下Vue3模板编译原理机Vue 的编译过程，感兴趣的朋友可以了解看看。