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 相关文章推荐
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php正则表达式学习笔记
2015/11/13 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
[转]JS宝典学习笔记
2007/02/07 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
Python中偏函数用法示例
2018/06/07 Python
python使用turtle绘制分形树
2018/06/22 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python的常用模块之collections模块详解
2018/12/06 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
财务科科长岗位职责
2014/03/10 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
高二英语教学反思
2016/03/03 职场文书