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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 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文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
可靠的数据流传输TCP
2016/03/15 面试题
爱国主义主题班会
2015/08/14 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
详解pytorch创建tensor函数
2022/03/22 Python