首页 >web前端 >前端问答 >element vue动态显示隐藏列

element vue动态显示隐藏列

王林
王林原创
2023-05-24 13:49:372117浏览

在使用 Vue.js 和 Element UI 构建页面时,经常需要使用表格展示数据。有时候会需要动态显示或隐藏某些列,使用户能够根据自己的需求定制所需的信息。Element UI 提供了方便易用且功能强大的表格组件,本文将着重介绍如何在 Element UI 表格中动态显示或隐藏列。

一、基本思路
Element UI 中表格组件提供了 column 对象,每个 column 对象可设置一列的属性。因此,若要动态显示或隐藏列,可通过在 column 对象中加入一个 v-if 控制属性的方式实现。

二、实例分析
此处以 Element UI 当中的 el-table 组件为例,演示如何通过 Vue.js 实现动态显示或隐藏列。假定我们有一组数据如下图所示。其中“编码”和“状态”两栏为需要动态显示或隐藏的列。

  1. 首先,在表格模板中添加如下代码:
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      v-if="showCode"
      prop="code"
      label="编码">
    </el-table-column>
    <el-table-column
      v-if="showStatus"
      prop="status"
      label="状态">
    </el-table-column>
  </el-table>
</template>
  1. 在 script 标签中加入 data 选项,并添加 showCode 和 showStatus 两个数据属性,初始值均为 true。
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, code: '001', status: '正常' },
        { name: '李四', age: 23, code: '002', status: '异常' },
        { name: '王五', age: 30, code: '003', status: '正常' },
        { name: '赵六', age: 40, code: '004', status: '异常' }
      ],
      showCode: true,
      showStatus: true
    }
  }
}
</script>
  1. 最后,在点击事件中改变 showCode 和 showStatus 的值即可动态显示或隐藏列。例如:
<el-button @click="showCode = !showCode">显示/隐藏编码</el-button>
<el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>

在点击“显示/隐藏编码”按钮之后,可看到效果如下图所示。当 showCode 的值为 true 时,列“编码”显示;当 showCode 值为 false 时,列“编码”隐藏。

四、总结
本文介绍了在 Element UI 表格组件当中如何实现动态显示或隐藏列。我们只需要在 column 对象中加入一个 v-if 控制属性,并在相关操作中改变其值,即可轻松实现该功能。这种方式可以让用户根据需求自由选择所需的信息,提高了页面的灵活性和可定制性。

以上是element vue动态显示隐藏列的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn