在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>
1
2
3
4
5
6
7
8
9
10
編輯器提示: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
2
3
4
5
6
7
8
9
10
11
即使用template標簽包裹即可,v-for 寫在template 上,v-if 綁定在需要循環的元素之上即可
---------------------