给el-table实现列显隐

**给 el-table 实现列显隐**

在实际开发中，我们经常需要根据数据的变化而动态控制表格的列显示或隐藏。虽然 `el-table` 提供了 `span-method` 和 `column` 的相关方法，但是这些方法并不能直接实现我们想要的效果。

本文将介绍如何给 `el-table` 实现列显隐功能，包括代码示例和注释。

### 一、需求分析首先，我们需要明确一下需求。我们希望能够根据数据的变化而动态控制表格的列显示或隐藏。

例如，如果某一行的数据中有一个字段为 `null` 或空字符串，我们可能希望将该列隐藏起来，以免影响用户体验。

### 二、实现方案为了实现这一功能，我们可以在 `el-table` 的 `data` 属性中添加一个 `visibleColumns` 数组，用于存储当前需要显示的列名。

然后，在 `el-table` 的 `columns` 属性中，我们可以使用 `renderHeader` 方法来动态控制列的显示或隐藏。

具体实现如下：

javascript// 表格数据data: [
 {
 id:1,
 name: 'John',
 age:25,
 address: null // 这一行的address字段为null },
 {
 id:2,
 name: 'Jane',
 age:30,
 address: 'New York'
 }
]

// 表格列配置columns: [
 {
 label: 'ID',
 prop: 'id',
 renderHeader: (h, { column }) => (
 <div>
 ID {this.visibleColumns.includes('id') ? null : (
 <i class="el-icon-minus" onClick={() => this.handleHideColumn(column)} />
 )}
 </div>
 )
 },
 {
 label: 'Name',
 prop: 'name'
 },
 {
 label: 'Age',
 prop: 'age'
 },
 {
 label: 'Address',
 prop: 'address',
 renderHeader: (h, { column }) => (
 <div>
 Address {this.visibleColumns.includes('address') ? null : (
 <i class="el-icon-minus" onClick={() => this.handleHideColumn(column)} />
 )}
 </div>
 )
 }
]

// 表格组件<el-table v-loading={loading} ref="table" :data="data" :columns="columns">
 // ...
</el-table>

// 表格方法handleHideColumn(column) {
 const index = this.visibleColumns.indexOf(column.prop);
 if (index !== -1) {
 this.visibleColumns.splice(index,1);
 } else {
 this.visibleColumns.push(column.prop);
 }
}