if判断条件成立则el-table-colunm的v-for不循环
时间: 2024-01-07 15:02:44 浏览: 67
数据库原理与应用 关于基本操作入门
如果您想要控制 `el-table-column` 中的 `v-for` 循环行为,可以将 `el-table-column` 放在一个包含 `v-if` 和 `v-for` 的父元素中,如下所示:
```html
<el-table>
<template v-if="condition">
<el-table-column v-for="(item, index) in items" :key="index" :prop="item.prop" :label="item.label"></el-table-column>
</template>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
这样,当 `condition` 为 `true` 时,`el-table-column` 才会被渲染,并且根据 `items` 数组中的元素数量进行循环渲染。当 `condition` 为 `false` 时,`el-table-column` 不会被渲染,因此 `v-for` 循环也不会执行。
需要注意的是,如果只是想控制 `el-table-column` 中的某些列是否显示,而不是整个 `el-table-column`,可以在 `v-for` 循环中添加 `v-if` 条件判断,如下所示:
```html
<el-table>
<el-table-column v-for="(item, index) in items" :key="index" :prop="item.prop" :label="item.label" v-if="item.show"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
其中,`items` 数组中的元素包含一个 `show` 属性,控制该列是否显示。这样,只有 `show` 属性为 `true` 的列才会被渲染。
阅读全文