v-show控制el-table-column
时间: 2023-08-09 10:10:16 浏览: 106
VB控制Excel
在 Element UI 中,可以使用 `v-show` 指令来控制 `el-table-column` 组件表头的显示与隐藏。具体步骤如下:
1. 在 `el-table-column` 组件中使用 `v-show` 指令控制表头的显示与隐藏,例如:
```html
<el-table :data="tableData">
<!-- 表头部分 -->
<el-table-column v-show="showName" prop="name" label="姓名"></el-table-column>
<el-table-column v-show="showAge" prop="age" label="年龄"></el-table-column>
<el-table-column v-show="showAddress" prop="address" label="地址"></el-table-column>
<!-- 表内容部分 -->
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
</el-table>
```
2. 在 `data` 中定义 `showName`、`showAge`、`showAddress` 数据,用于控制 `el-table-column` 组件的显示与隐藏。例如:
```javascript
data() {
return {
tableData: [...],
showName: true,
showAge: true,
showAddress: true
}
}
```
3. 在需要的时候修改 `showName`、`showAge`、`showAddress` 数据的值即可控制 `el-table-column` 组件的显示与隐藏。例如:
```javascript
// 隐藏姓名列
this.showName = false;
// 显示姓名列
this.showName = true;
```
注意,当 `el-table-column` 组件的 `v-show` 值为 `false` 时,该列会被隐藏,但不会被完全移除,因此当需要显示该列时,不需要重新生成该列,这可以提高表格的性能。如果需要频繁切换列的显示与隐藏,建议使用 `v-show` 指令代替 `v-if` 指令。
阅读全文