前端Vue循环渲数据时，控制字段的显示与隐藏，用v-if与v-for同时使用报错问题

在Vue中使用v-for循环一个数组/对象时，如果再使用v-if，那么会提示使用计算属性(能正常使用)，因为Vue中是不提倡v-for与v-if同时使用的。
在我的项目中也遇到了问题，不过翻看文档解决了。

修改前：

第一种 用elementUI

  <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>

第二中种,用div的

  <div class="type-list" v-for="(item, index) in types" :key="index" v-if="item.id !=0">
  </div>

编辑器提示：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

修改后：

第一种 用elementUI

  <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>

第二中种,用div的

  <template v-for="(item, index) in types">
    <div class="type-list" :key="index" v-if="item.id !=0">
    </div>
  </template>

参考：https://www.cnblogs.com/rainbow70626/p/15832553.html

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！