<el-table-column 隐藏
时间: 2024-11-08 18:12:17 浏览: 17
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
`<el-table-column>` 标签中的 "隐藏" 没有直接属性可以让你简单地让它在满足某个条件时不显示。但是,如果你想达到类似的效果,可以结合使用 CSS 和 Vue 的 `v-show` 或者 `v-if` 组件特性来控制列的可见性。
1. 使用 `v-if`:
```html
<el-table-column v-if="shouldHideColumn"></el-table-column>
```
在这段代码中,`shouldHideColumn` 是一个布尔值,可以根据业务需求来自定义,比如根据 `scope.row.takeTurns` 的状态来设置。
2. 使用 `v-show`:
```html
<el-table-column v-show="shouldShowColumn"></el-table-column>
```
`v-show` 的列总是会占用空间,只是内容不可见,而 `v-if` 则完全移除列。
3. 如果你想基于 `scope.row.takeTurns` 来控制隐藏,可以这样做:
```html
<template slot-scope="scope">
<el-table-column v-if="!scope.row.takeTurns" :hidden="true"></el-table-column>
<!-- 其他列... -->
</template>
```
在这里,当你不需要显示列时,我们设置 `hidden` 属性为 `true`,使其隐藏。
阅读全文