在使用 Vue.js 和 Element UI 构建页面时，经常需要使用表格展示数据。有时候会需要动态显示或隐藏某些列，使用户能够根据自己的需求定制所需的信息。Element UI 提供了方便易用且功能强大的表格组件，本文将着重介绍如何在 Element UI 表格中动态显示或隐藏列。
一、基本思路
Element UI 中表格组件提供了 column 对象，每个 column 对象可设置一列的属性。因此，若要动态显示或隐藏列，可通过在 column 对象中加入一个 v-if 控制属性的方式实现。
二、实例分析
此处以 Element UI 当中的 el-table 组件为例，演示如何通过 Vue.js 实现动态显示或隐藏列。假定我们有一组数据如下图所示。其中“编码”和“状态”两栏为需要动态显示或隐藏的列。
<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><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><el-button @click="showCode = !showCode">显示/隐藏编码</el-button> <el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>
在点击“显示/隐藏编码”按钮之后，可看到效果如下图所示。当 showCode 的值为 true 时，列“编码”显示；当 showCode 值为 false 时，列“编码”隐藏。
四、总结
本文介绍了在 Element UI 表格组件当中如何实现动态显示或隐藏列。我们只需要在 column 对象中加入一个 v-if 控制属性，并在相关操作中改变其值，即可轻松实现该功能。这种方式可以让用户根据需求自由选择所需的信息，提高了页面的灵活性和可定制性。
作者：王林
在前端开发中，往往为了一些原因（比如：代码说明，标注等等），需要用到注释语句。那么到底要怎样注释注释语句，注释语句的一些...
HTML5 增加了一项新功能是 自定义数据属性 ，也就是data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的...
Bootstrap Modals（模态框）是使用定制的Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您...
BootStrap简介：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。（推荐学习：Boo...
本篇文章主要为大家讲解了关于HTML段落文本换行的br标签的用法，在一个段落中，正确的换行能使页面更美观。接下来让我们一起看看...
