vueelementUI表格控制显示隐藏对应列的方法

2024-04-02 19:04:59 275人浏览安东尼

摘要

本文实例为大家分享了Vue elementUI表格控制显示隐藏对应列的具体代码，供大家参考，具体内容如下需求：后端返回全部列数据。前端根据选项来显示对应的列，如果不勾选，默认全部隐

本文实例为大家分享了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
                }
              })
            }
      }
    },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vueelementUI表格控制显示隐藏对应列的方法

本文链接: https://www.lsjlt.com/news/145846.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vueelementUI表格控制显示隐藏对应列的方法

本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码，供大家参考，具体内容如下需求：后端返回全部列数据。前端根据选项来显示对应的列，如果不勾选，默认全部隐...

99+

2024-04-02
vue elementUI表格控制怎么显示隐藏对应列

这篇文章主要介绍“vue elementUI表格控制怎么显示隐藏对应列”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue elementUI表格控制怎么显示隐藏对应列”文章能帮...

99+

2023-06-30
vue实现动态控制表格列的显示隐藏

本文实例为大家分享了vue实现动态控制表格列显示隐藏的具体代码，供大家参考，具体内容如下一、效果如上图所示，点击table右上方的表格按钮，弹出菜单栏，进行勾选，从而达到表格对...

99+

2024-04-02
Vue实现动态控制表格列的显示和隐藏

本文实例为大家分享了Vue实现动态控制表格列的显示和隐藏的具体代码，供大家参考，具体内容如下效果如图：表头标题是重复的、为了能看到滚动效果 v-if=“lists[...

99+

2024-04-02
vue+elementui实现动态控制表格列的显示和隐藏

vue+elementui(table,多选框)实现动态控制表格列的显示和隐藏，供大家参考，具体内容如下 imdex.vue <template> <div&g...

99+

2024-04-02
Vue怎么实现动态控制表格列的显示和隐藏

本篇内容介绍了“Vue怎么实现动态控制表格列的显示和隐藏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如图：表头标题是重复的、为了能看到...

99+

2023-06-29
vue+elementui怎么实现动态控制表格列的显示和隐藏

这篇文章主要介绍了vue+elementui怎么实现动态控制表格列的显示和隐藏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+elementui怎么实现动态控制表格列的显示和隐藏文章都会有所收获，下面我们...

99+

2023-06-30
vue+elementUI配置表格的列显示与隐藏

vue+elementUI配置表格的列显示与隐藏，供大家参考，具体内容如下描述：表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+elementUI（适配Vue3...

99+

2024-04-02
vue table表格中如何控制下拉框的显示隐藏

目录vue table表格控制下拉框的显示隐藏vue下拉框清空总结vue table表格控制下拉框的显示隐藏需求：点击表格的某一个列的吗某个值，显示那值得下拉框，失去焦点时则隐藏 ...

99+

2023-01-18

vue table表格 table下拉框的显示 table下拉框的隐藏
vue实现动态控制el-table表格列的展示与隐藏

本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码，供大家参考，具体内容如下 1.引入el-table组件，这里我直接用官网的示例代码 <templ...

99+

2024-04-02
vue+elementUI怎么配置表格的列显示与隐藏

这篇文章主要介绍“vue+elementUI怎么配置表格的列显示与隐藏”，在日常操作中，相信很多人在vue+elementUI怎么配置表格的列显示与隐藏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue+e...

99+

2023-06-30
css控制元素隐藏和显示的方法是什么

CSS控制元素隐藏和显示的方法有以下几种：1. display属性：可以设置为none来隐藏元素，设置为block或其他合适的值来显...

99+

2023-08-08

css
使用vue控制元素显示隐藏方式

目录vue控制元素显示隐藏解释注意点控制元素显示隐藏 v-show与v-if,以及v-if-elsev-show与v-if作用vue控制元素显示隐藏 HTML代码： <div...

99+

2022-11-13

vue元素 vue元素显示 vue元素隐藏
使用Vue 控制元素显示隐藏的方法和区别

目录一、控制元素显示隐藏的方法1. v-if 和 v-else 指令2. 切换元素的CSS display属性3. opacity属性4. visibility属性5. width和...

99+

2022-12-08

Vue 控制元素显示隐藏 Vue 控制元素显示隐藏 vue显示隐藏
javascript显示隐藏div的方法

这篇文章主要介绍javascript显示隐藏div的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！方法：1、利用display属性，语法“div对象.style.display="none|block&...

99+

2023-06-14
vue如何控制元素的隐藏与显示

vue如何控制元素的隐藏与显示，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。vue控制元素隐藏与显示的方法：1、利用“v-if...

99+

2024-04-02
html表格行的隐藏方法

这篇文章主要介绍了html表格行的隐藏方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。隐藏表格行的方法：1、在tr标签中使用hidden属性，语法“<tr hidde...

99+

2023-06-15
javascript显示和隐藏div的方法

这篇文章给大家分享的是有关javascript显示和隐藏div的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。javascript显示隐藏div的方法：首先新建文件，并创建button按钮；然后创建隐藏的di...

99+

2023-06-14
C# 显示、隐藏窗口对应的任务栏

WPF中全屏窗口，会自动隐藏任务栏。那非全屏窗口如何隐藏任务栏？甚至有没有一种场景，隐藏任务后自定义一套系统任务栏来显示？以下会分阶段讲述一些概念，任务栏、查找窗口、控制窗口显示...

99+

2024-04-02
微信小程序控制view隐藏显示的5种方法汇总

目录一、使用wx:if指令二、使用opacity属性三、使用display属性四、还有一种方式可以使用绝对定位五、使用hidden属性总结一、使用wx:if指令因为 wx:if 是...

99+

2024-04-02