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 24 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue如何清除浏览器历史栈
May 25 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
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
Destoon实现多表查询示例
2014/08/21 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
在Python中使用成员运算符的示例
2015/05/13 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python实现简单日期工具类
2019/04/24 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python如何读写字节数据
2020/08/05 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
华三通信H3C面试题
2015/05/15 面试题
大学生军训自我评价分享
2013/11/09 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
安全教育月活动总结
2014/05/05 职场文书
关于保护环境的建议书
2014/05/13 职场文书
小学运动会报道稿
2015/07/22 职场文书
小学大队委竞选口号
2015/12/25 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
javascript对象3个属性特征
2021/11/17 Javascript