avue拼接动态多级表头

最新推荐文章于 2024-05-16 12:43:50 发布

早起傻一天～G

最新推荐文章于 2024-05-16 12:43:50 发布

阅读量386

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sinat_24328329/article/details/127085427

版权

拼接动态多级表头

传入的data数据为树结构的数据，以parentId关联

//拼接数据列
    getOptionColum(data){
      // console.log(JSON.stringify(data))
      //处理数据列
      // 初始化列
      // this.option.column = this.optionColumn;
      this.option.column = [];
      // 区域列
      this.option.column.push({label: "区域", prop: "HOSPITAL_NAME", align: 'left'});
      // 表里表头
      for(let i = 0; i < data.length; i++){
        // 获取一级字典
        var ele = data[i]
        // 判断是否存在子级
        if(ele.children && ele.children.length > 0){
          // 初始化二级表头
          var eleTwoTitle = [];
          // 拼接二级表头
          eleTwoTitle.push({
            label: ele.dictValue ,
            prop: "WASTE_TYPE" + ele.dictKey,
            align: 'center'
          })
          //便利一级表头子级
          ele.children.forEach(eleTwo => {
            // 判断二级表头是否存在子级
            if(eleTwo.children && eleTwo.children.length > 0){
              // 初始化三级表头
              var eleThreeTitle = [];
              // 拼接三级表头
              eleThreeTitle.push({
                label: eleTwo.dictValue ,
                prop: "WASTE_TYPE" + eleTwo.dictKey,
                align: 'center',
              });
              // 便利二级表头子级
              eleTwo.children.forEach(eleThree => {
                // 拼接三级表头
                eleThreeTitle.push(
                  {
                    label: eleThree.dictValue ,
                    prop: "WASTE_TYPE" + eleThree.dictKey,
                    align: 'center',
                  }
                );
              });
              // 拼接二级表头
              eleTwoTitle.push(
                {
                  label: eleTwo.dictValue,
                  align: 'center',
                  children: eleThreeTitle
                }
              );
            }else{
              // 拼接二级表头
              eleTwoTitle.push(
                {
                  label: eleTwo.dictValue,
                  prop: "WASTE_TYPE" + eleTwo.dictKey,
                  align: 'center',
                }
              );
            }
          });
          // 拼接一级表头
          this.option.column.push({label: ele.dictValue, align: 'center',
            children: eleTwoTitle
          });
        }else{
          // 拼接一级表头
          this.option.column.push({label: ele.dictValue , prop: "WASTE_TYPE" + ele.dictKey, align: 'center'});
        }
      }
      // 合计列
      this.option.column.push({label: "合计", prop: "SUMWEIGHT", align: 'left'});
    },