el-table-column v-if 条件为true,表头不展示
时间: 2023-11-23 08:51:44 浏览: 102
如果你希望在 el-table-column 的 v-if 条件为 true 时,表头不展示,你可以使用 Element UI 提供的 slot-scope 属性来自定义表头的展示内容。通过在 el-table-column 组件上添加 slot-scope 属性,并在具体的表头内容中判断条件,可以实现根据条件来控制表头的展示与隐藏。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column label="姓名" v-if="showColumn">
<!-- 自定义表头的展示内容 -->
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<!-- 其他列的定义 -->
</el-table>
</template>
```
在上面的代码中,通过 v-if="showColumn" 控制 el-table-column 的展示与隐藏。如果 showColumn 为 true,则该列会被渲染,否则不会被渲染。同时,通过 slot-scope 属性和 template 标签,可以自定义表头的展示内容。
注意:如果只是希望隐藏表头,但仍然需要展示对应的数据列,可以将 el-table-column 的 label 属性设置为空字符串。例如:`<el-table-column label="" v-if="showColumn">`。这样即可隐藏表头,但仍然会展示该列的数据。
阅读全文