el-table-column 隐藏
时间: 2023-11-07 22:50:25 浏览: 141
要在 `el-table` 中隐藏 `el-table-column`,你可以使用 `v-if` 或 `v-show` 来控制该列的显示与隐藏。
1. 使用 `v-if` 来条件性地渲染列:
```html
<el-table :data="tableData">
<el-table-column label="Column 1" prop="column1" v-if="showColumn1"></el-table-column>
<el-table-column label="Column 2" prop="column2"></el-table-column>
</el-table>
```
在上面的例子中,只有当 `showColumn1` 的值为 `true` 时,列 "Column 1" 才会被渲染出来。
2. 使用 `v-show` 来根据条件控制列的显示与隐藏:
```html
<el-table :data="tableData">
<el-table-column label="Column 1" prop="column1" v-show="showColumn1"></el-table-column>
<el-table-column label="Column 2" prop="column2"></el-table-column>
</el-table>
```
与 `v-if` 不同,`v-show` 只是简单地通过 CSS 的 `display` 属性控制元素的显示与隐藏。如果 `showColumn1` 的值为 `false`,列 "Column 1" 会被隐藏起来,但仍然存在于 DOM 中。
你可以根据需要选择使用 `v-if` 还是 `v-show` 来隐藏 `el-table-column`。
阅读全文