Vue - ElementUI中循环渲染表格,控制字段的显示与隐藏 v-if与v-for同时使用
在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡v-for与v-if同时使用的。在我的项目中也遇到了问题不过翻看文档解决了修改前:<el-table-columnv-for="(item, index) in columns":prop="item.prop":key="index"ali...
·
在Vue中使用v-for
循环一个数组/对象时,如果再使用v-if
,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡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>
- 即使用
template
标签包裹即可,v-for
写在template
上,v-if
绑定在需要循环的元素之上即可
更多推荐
已为社区贡献1条内容
所有评论(0)