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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
克隆一个新项目的快捷方式
2013/04/10 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python实现简单图片物体标注工具
2019/03/18 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
SQL面试题
2013/04/30 面试题
给领导的致歉信范文
2014/01/13 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
给客户的检讨书
2014/12/21 职场文书
狮子林导游词
2015/02/03 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书