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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue 自定义组件添加原生事件
Apr 21 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php四种定界符详解
2017/02/16 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python:socket传输大文件示例
2017/01/18 Python
python爬虫使用cookie登录详解
2017/12/27 Python
解读python如何实现决策树算法
2018/10/11 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
explicit和implicit的含义
2012/11/15 面试题
会计实习期自我鉴定
2013/10/06 职场文书
物理力学求职信
2014/02/18 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
培训通知
2015/04/17 职场文书
教师节主持词开场白
2015/05/29 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书