el table column 动态 隐藏
时间: 2023-05-04 09:01:40 浏览: 47
这个问题可能是问如何隐藏b'el表格列的动态信息。如果是这样的话,您可以在b'el表格组件中使用一些属性或方法来达到这个目的。例如,您可以设置表格列的props属性中的visible为false,或者在表格的column slot中自定义列头来隐藏列的数据。具体取决于您的实际需求。
相关问题
el-table-column 隐藏
要在 `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`。
el-table-column动态显示隐藏
可以通过设置 el-table-column 的 prop 属性来动态控制列的显示和隐藏。具体实现方式如下:
1. 在 data 中定义一个变量,用于控制列的显示和隐藏,例如:
```
data() {
return {
showColumn: true
}
}
```
2. 在 el-table-column 中绑定 prop 属性,例如:
```
<el-table-column
prop="name"
label="姓名"
:visible="showColumn"
></el-table-column>
```
3. 在需要控制列显示和隐藏的地方,修改 showColumn 变量的值即可,例如:
```
this.showColumn = false; // 隐藏列
this.showColumn = true; // 显示列
```