vue elementUI表格控制对应列


Posted in Vue.js onApril 13, 2022

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

效果图

勾选后显示对应的列

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.js 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 #Vue.js
vue的项目如何打包上线
vue2的 router在使用过程中遇到的一些问题
Apr 13 #Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 #Vue.js
如何优化vue打包文件过大
Apr 13 #Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 #Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 #Vue.js
You might like
PHP的引用详解
2015/02/22 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
vue实现登录功能
2020/12/31 Vue.js
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python进行数据提取的方法总结
2016/08/22 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python实现人工蜂群算法
2020/09/18 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
公司合作意向书
2014/04/01 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python