cascader级联选择器数据处理（返回给后端的数据以及数据回填）

cascader级联选择器数据处理（返回给后端的数据以及数据回填）

<el-form-item label="相关内容" prop="preplanResources">
            <el-cascader
              clearable
              placeholder="请选择相关内容"
              ref="resourcesRef"
              v-model="form.preplanResources"
              :options="options"
              :props="cascaderProps"
              @change="resourcesChange"
            >
            </el-cascader>
          </el-form-item>

这里是配置数据，label/value/children是为了跟后端返回的数据匹配上

cascaderProps: {
        multiple: true, //是否多选
        checkStrictly: true, //任意多选
        emitPath: true, //全路径
        value: "name",
        label: "name",
        children: "children",
      },

后端返回的数据

 options: [
        {
          parentId: "",
          id: "100",
          name: "河南省",
          level: 1,
          isSelect: true, //是否回显
          children: [
            {
              parentId: " 100",
              id: "101",
              name: "郑州市",
              level: 2,
              isSelect: true, //是否回显
              children: [
                { parentId: "101", id: "1011", name: "金水区", level: 3 },
                { parentId: "101", id: "1012", name: "南城区", level: 3 },
                { parentId: "101", id: "1013", name: "北城区", level: 3 },
              ],
            },
            {
              parentId: " 100",
              id: "102",
              name: "安阳市",
              level: 2,
              children: [
                { parentId: "102", id: "103", name: "北环", level: 3, isSelect:true },
              ],
            },
            {
              parentId: " 100",
              id: "103",
              name: "鹤壁市",
              level: 2,
              children: [
                { parentId: "103", id: "104", name: "南环", level: 3 },
              ],
            },
          ],
        },
        {
          parentId: "",
          id: "200",
          name: "四川省",
          isSelect:true,//是否回显
          level: 1,
          children: [
            {
              parentId: " 200",
              id: "201",
              name: "成都市",
              level: 2,
              children: [
                { parentId: "201", id: "202", name: "四川区", level: 3 },
              ],
            },
          ],
        },
        {
          parentId: "",
          id: "300",
          name: "云南省",
                    isSelect:true,//是否回显
          level: 1,
          children: [
            {
              parentId: " 300",
              id: "301",
              name: "三亚市",
                        isSelect:true,//是否回显
              level: 2,
              children: [
                { parentId: "301", id: "302", name: "云山区", level: 3 },
              ],
            },
          ],
        },
        {
          parentId: "",
          id: "400",
          name: "河北省",
          level: 1,
          children: [
            {
              parentId: " 400",
              id: "401",
              name: "邯郸市",
              level: 2,
              children: [
                { parentId: "401", id: "402", name: "河汉区", level: 3 },
              ],
            },
          ],
        },
        {
          parentId: "",
          id: "500",
          name: "山东省",
          level: 1,
          children: [
            {
              parentId: " 500",
              id: "501",
              name: "青岛市",
              level: 2,
              children: [
                { parentId: "501", id: "502", name: "日照区", level: 3 },
              ],
            },
          ],
        },
        {
          parentId: "",
          id: "600",
          name: "广西省",
          level: 1,
          children: [
            {
              parentId: " 600",
              id: "601",
              name: "桂林市",
              level: 2,
              children: [
                { parentId: "601", id: "602", name: "大河区", level: 3 },
              ],
            },
          ],
        },
      ],

data初始化数据

resultData：[] //最终处理好格式的数据

后端需要的格式

    preplanResources:[
      {
        resourceType:'二级名称',
        resourceVals:['三级名称1','三级名称2']
      }
    ]

数据处理

//选中值发生变化时触发的方法
    resourcesChange(val) {
      //获取选中的元素节点
      let checked = this.$refs.resourcesRef.getCheckedNodes();
      this.handleSelectData(checked);
    },
// 格式化数据
    handleSelectData(arr) {
      this.resultData = []; //最终数据
      let itemData = []; //数据链路处理
      arr.forEach((el) => {
        console.log(el.label, "label");
        let obj = {};
        if (el.level == 3) {
          obj.resourceType = el.parent.label;
          obj.resourceVals = [el.label];
          itemData.push(obj);
        } else if (el.level == 2) {
          obj.resourceType = el.label;
          obj.resourceVals = [];
          itemData.push(obj);
        }
      });
      // 数据合并
      for (let i = 0; i < itemData.length; i++) {
        let item1 = itemData[i];
        for (let j = i + 1; j < itemData.length; j++) {
          let item2 = itemData[j];
          if (item1.resourceType == item2.resourceType) {
            if (
              item1.resourceVals.length > 0 &&
              item2.resourceVals.length > 0
            ) {
              item1.resourceVals = [
                ...item1.resourceVals,
                ...item2.resourceVals,
              ];
            } else if (item1.resourceVals.length == 0) {
              item1.resourceVals = item2.resourceVals;
            }
          }
        }
        let isContain = false; //是否包含，去重
        this.resultData.forEach((el) => {
          if (el.resourceType == item1.resourceType) {
            isContain = true;
          }
        });
        if (!isContain) {
          this.resultData.push(item1);
        }
      }
      return this.resultData;
    },

数据回显数据处理

 handleShowData(arr) {
      let resultArr = [];
      for (let i = 0; i < arr.length; i++) {
        let v1 = arr[i];
        if (v1.selected) {
          resultArr.push(v1.name);
        }
        for (var j = 0; j < v1.children.length; j++) {
          let v2 = v1.children[j];
          if (v2.selected) {
            resultArr.push([v1.name, v2.name]);
          }
          for (var k = 0; k < v2.children.length; k++) {
            let v3 = v2.children[k];
            if (v3.selected) {
              resultArr.push([v1.name, v2.name, v3.name]);
            }
          }
        }
      }
      this.form.preplanResources = resultArr;
    },

回显

// 编辑
    editList(row) {
      this.Sign = "edit";
      this.title = "编辑";
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
      this.getResourceData(row.id).then(() => {
        this.handleShowData(this.topResourceData);
      });
      console.log(this.form, "this.form");
    },