vue v-for 和 v-if 同时使用的场景有没好的替代方案

Question

业务需求

表单明细页面，api返回的一个单据信息billDetail需要展示在页面上，为了可以后台灵活配置展示形式，api同时还会返回一个columns用于定义单据每个列的展示形式，如：列名、列标题、控件类型、是否只读等。

目前代码实现

目前用vue的v-for循环单据的所有列，然后又嵌套v-for循环columns列配置看循环到的列是否有配置信息，如果有就按配置展示出来，没有就不显示。

代码如下：

问题

vue是不推荐v-for和v-if混合使用的。
那么我这个需求如何实现比较优雅呢？

Answer 1

可以先对数据做个处理，将columns变成一个object

let colConf = {};
columns.forEach((item) => {
    colConf[item.field] = item;
});

template写法

<template v-for="(value, key) in billDetail">
    <template v-if="colConf[key]">
        // code
    </template>
</template>

Answer 2

图片一直加载中，可能我网速不好，根据描述，v-if写在套一层<template></template>上应该能解决你的问题

Answer 3

columns数据filter过滤下

Answer 4

最终完成代码

  computed: {
    cols: function() {
      //将列配置数组转为对象
      let colsObj = {};
      this.columns.forEach((item) => {
        colsObj[item.field] = item;
      });

      //循环单据所有列，存在列配置信息的加入到新数组
      let colsArray = [];
      for (var key in this.bill) {
        if (colsObj[key]) {
          colsArray.push(colsObj[key]);
        }
      }

      return colsArray;
    }
  },

    <group slot="content" title="单据详情">
      <template v-for="c in cols">
        <cell :title="c.title" :value="bill[c.field]" :key="c.field" v-if="c.type==='cell'"></cell>
        
        ...其它控件
        
      </template>
    </group>