element多层表头+动态增减列

自己遇到的问题，只是写出自己的解决思路

需求是这样的,表头是两层的，然后要求表格的列数可以随数据动态增减

我把表拆分成三部分，分别是数据，第一层表头，第二层表头

这里的数据是模拟请求拿到的数据

this.tableMicData = [          {            name: "asd",            type: [              { tab: "肺炎克雷伯", mgan: "1", naiyao: "2", zjie: "3" },              { tab: "铜绿假", mgan: "4", naiyao: "5", zjie: "6" },              { tab: "鲍式不动杆菌", mgan: "9", naiyao: "8", zjie: "7" },            ],
          },
          {
            name: "asd2",
            type: [
              { tab: "肺炎克雷伯", mgan: "11", naiyao: "12", zjie: "13" },
              { tab: "铜绿假", mgan: "21", naiyao: "22", zjie: "23" },
              { tab: "鲍式不动杆菌", mgan: "1", naiyao: "2", zjie: "33" },
            ],
          },
        ];

循环+去重 拆分出第一层表头的信息

this.tableMicData.forEach(o=>{
     o.type.forEach(i=>{
         this.tableMicTitle.push(i.tab)
     })
 })
this.tableMicTitle = [...new Set(this.tableMicTitle)]

第一层表头的信息是固定的 R%,I%,S% 所以我就直接data里定义了

 tableMicLabel: [
        {
          label: "R%",
          key: "mgan",
        },
        {
          label: "S%",
          key: "naiyao",
        },
        {
          label: "I%",
          key: "zjie",
        },
      ],

表格部分

 <el-table :data="tableMicData" border style="width: 100%">
      <el-table-column
        prop="name"
        align="center"
        label="抗生素"
      ></el-table-column>
      <!-- 循环1级表头 -->
      <template v-for="(item, index) in tableMicTitle">
        <el-table-column align="center" :label="item" :key="index">
          <!-- 循环2级表头 -->
          <template v-for="items in tableMicLabel">
            <el-table-column
              :label="items.label"
              :key="items.key"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.type[index][items.key] }}
                </span>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>

这里有一个问题

当某一条数据少了一个子数据，就会发生错误

想不到好的方法，所以只能用老办法，去循环比对了

//当某个值不存在
this.tableMicData.forEach((o) => {
   //获得每项的name
    var b = [];
    var c = [];
    o.type.forEach((i) => {         
        let haveIndex = this.tableMicTitle.findIndex((j) => j ==         i.tab);
        b.push(haveIndex);    //拿到存在的角标
    });
    //初始c
    for (var i = 0; i < this.tableMicTitle.length; i++) {
        var notExist = {
            tab: this.tableMicTitle[i],
            R: "",
            S: "",
            I: "",
     };
     c.push(notExist);
   }
   //c赋值给o.type
  for (var i = 0; i < b.length; i++) {
    var dex = b[i];
    c[dex] = o.type[i];
  }
  o.type = c
});
}

这样就不会报错了，数据显示为空