vue+element ui 隐藏列

### 动态隐藏表格列的方法 在 Vue 和 Element UI 的组合中，可以通过绑定 `v-if` 或者动态修改表头数组来实现表格列的隐藏功能。以下是具体实现方式： #### 方法一：通过动态控制表头数组 可以将表格的列配置存储在一个数组中，并根据条件过滤掉不需要显示的列。 ```javascript // 定义初始列配置 data() { return { tableColumns: [ { prop: 'name', label: '姓名', visible: true }, { prop: 'age', label: '年龄', visible: false }, // 默认隐藏此列 { prop: 'address', label: '地址', visible: true } ], tableData: [ { name: '张三', age: 25, address: '北京' }, { name: '李四', age: 30, address: '上海' } ] }; }, computed: { filteredColumns() { return this.tableColumns.filter(column => column.visible); } } ``` 在模板部分，使用计算属性 `filteredColumns` 来渲染表格列[^1]。 ```html <el-table :data="tableData"> <el-table-column v-for="column in filteredColumns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column> </el-table> <!-- 控制列显隐 --> <div> <el-checkbox v-model="col.visible" v-for="(col, index) in tableColumns" :key="'checkbox-' + index">{{ col.label }}</el-checkbox> </div> ``` 这种方法的核心在于维护一个带有可见性标志 (`visible`) 的列配置数组，并利用 `filter()` 函数筛选出需要展示的列。 --- #### 方法二：通过 `style` 属性隐藏特定列 如果不想改变数据结构，也可以通过 CSS 隐藏指定列的内容。 ```css .hidden-column .cell { display: none; } ``` 然后，在 JavaScript 中动态为某列添加类名： ```javascript methods: { toggleColumnVisibility(index) { const targetColumn = this.$refs.table.columns[index]; if (targetColumn.className.includes('hidden-column')) { targetColumn.className = targetColumn.className.replace(' hidden-column', ''); } else { targetColumn.className += ' hidden-column'; } } } ``` 需要注意的是，这种方式仅适用于简单的场景，因为它是基于 DOM 操作完成的，可能会带来一定的性能开销[^2]。 --- #### 示例代码总结 以下是一个完整的示例代码片段，展示了如何结合上述两种方法实现动态隐藏列的功能： ```html <template> <div> <!-- 表格区域 --> <el-table ref="table" :data="tableData"> <el-table-column v-for="column in filteredColumns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column> </el-table> <!-- 列显隐控制 --> <div style="margin-top: 20px;"> <el-checkbox v-model="col.visible" v-for="(col, index) in tableColumns" :key="'checkbox-' + index">{{ col.label }}</el-checkbox> </div> </div> </template> <script> export default { data() { return { tableColumns: [ { prop: 'name', label: '姓名', visible: true }, { prop: 'age', label: '年龄', visible: false }, { prop: 'address', label: '地址', visible: true } ], tableData: [ { name: '张三', age: 25, address: '北京' }, { name: '李四', age: 30, address: '上海' } ] }; }, computed: { filteredColumns() { return this.tableColumns.filter(column => column.visible); } } }; </script> ``` --- ###