Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用

在Vue中使用

v-for

v-if

v-for

v-if

<el-table-column
v-for="(item, index) in columns"
:prop="item.prop"
:key="index"
align="center"
:width="item.width"
:label="item.label"
v-if="item.show"
>
></el-table-column>

编辑器提示：

vue/no-use-v-if-with-v-for] The 'columns' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue

修改后：

<template v-for="(item, index) in columns">
<el-table-column
:prop="item.prop"
:key="index"
align="center"
:width="item.width || '' "
:label="item.label"
v-if="item.show"
>
</el-table-column>
</template>

1. 即使用

   template

   标签包裹即可，

   v-for

   写在

   template

   上，

   v-if

   绑定在需要循环的元素之上即可