Avue篇《论avue-curd多级动态复杂表头》

## Avue篇《论avue-curd多级动态复杂表头》 Avue笔记篇
这篇笔记主要标注了 <avue-crud多级复杂的动态表头怎么实现> 根据后端数据返回完成动态表头

先上效果图

最终效果如上图所示

后端接口参数（如）：


代码详情：

onLoad(page, params = {}) {
      this.loading = true;
      if (params.tenantId === "" || params.tenantId === undefined)
        params.tenantId = JSON.parse(
          localStorage.getItem("saber-tenantId")
        ).content;
      monthlyanType(params)   //接口封装名
        .then((res) => {
          this.page.total = res.data.data.total;
          //处理复杂表头
          Object.keys(
            res.data.data.records[0].stringStatisticsReturnHashMap
          ).forEach((item, index) => {
            /*父表头*/
            this.option.column.push({ label: item, children: [] });
            res.data.data.records[0].stringStatisticsReturnHashMap[
              item
            ].forEach((v, vIndex) => {
              /*子表头*/
              this.option.column[index + 4].children.push({
                label: v.title1,
                prop: index + "" + vIndex,
              });
            });
          });
          // 处理接口返回数据
          res.data.data.records.forEach((item) => {
            let obj = {};
            obj.city = item.city;
            obj.cityNum = item.cityNum;
            Object.keys(item.stringStatisticsReturnHashMap).forEach((v, i) => {
              item.stringStatisticsReturnHashMap[v].forEach((v1, i1) => {
                obj[i + "" + i1] = v1.num;
              });
            });
            this.data.push(obj);
          });
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },