el-cascader 级联选择器回显数据 （带有子级children）

上代码拉

这里要说一下加校验 提交得时候是提交数组，所有prop 绑的也是这个值

        <el-form-item
              label="权限范围:"
              :label-width="formLabelWidth"
              prop="roleMenuList"
            >
              <el-cascader
                v-model="role_id"
                :options="limitData"
                :props="propsEdit"
                collapse-tags
                clearable
                @change="handleEditChange"
              ></el-cascader>
            </el-form-item>
            

data(){
    return {
        propsEdit: {
             //编辑
             multiple: true,
             value: "menuId",
             label: "menuName",
             children: "children",
         },
          role_id: [],
        // 表单验证
        dataRules: {
            roleName: [{ required: true, trigger: "blur", message: "请输入" }],
            roleMenuList: [
                  { type: "array", required: true, trigger: "change" },
            ],
        },
         // 编辑
        editRole: {
            enterpriseId: 1,
             roleId: "",
             roleName: "",
             roleMenuList: [],
      },
    }
}

   // 点击 编辑用户回显
    openAddUser(row) {
      console.log("信息", row);
      this.editRole.roleName = row.roleName;
      this.muneIdList = row.muneIdList;
      // 回显的数据 通过id 去判断显示的数据
      ！！！！！做了处理  这块代码就不需要拉
      // row.muneIdList.forEach((menuId) => {
      //   this.role_id = [menuId];
      // });
      // console.log(this.role_id);
      this.editRole.roleId = row.roleId;
      this.getLimitsInfo(); //获取权限范围列表
      this.editVisible = true;
    },
    
     // 选中值发生变化得时候
     handleEditChange(event) {
     // 这里的处理可根据后台需要什么类型进行转换即可
      const arrayToString = (event) => {
        let str = "";
        for (let i = 0; i < event.length; i++) {
          if (Array.isArray(event[i])) {
            str += arrayToString(event[i]);
          } else {
            str += event[i];
          }
        }
        return str;
      };
      let roleMenuList = arrayToString(event.join(",")).split(",").map(Number);
      let handlezero = Array.from(new Set(roleMenuList)) || [];//去重
      //因为里面有还有一个0 所以length为 1   在这里进行了处理
      this.editRole.roleMenuList = handlezero.length > 0 && handlezero[0] == 0 ? [] : handlezero; 
    },

   // 结构匹配
    transferItem(list) {
      let ids = [];
      (this.muneIdList || []).forEach((id) => {
        (list || []).forEach((item) => {
          if (item.menuId == id) {
            ids.push([item.parentId, item.menuId]);
          }
        });
      });
      return ids;
    },
    // 获取权限范围
    getLimitsInfo() {
      getLimitsInfo()
        .then((res) => {
          console.log("权限范围", res);
          if (res.code == 200) {
            this.limitData = res.data;
            let roleIdlIST = [];
            let muneIdList = Array.from(new Set(this.muneIdList)); // 去重
            将拿到得数据和原数据进行对比
            (muneIdList || []).forEach((ids) => {
              (this.limitData || []).forEach((item) => {
                if (item.menuId == ids && item.parentId == 0) {
                  // !!!  这里将子级进行处理
                  roleIdlIST.push(this.transferItem(item.children));
                }
              });
            });
            进行合并
            roleIdlIST.forEach((item) => {
              this.role_id = this.role_id.concat(item);
            });
            this.handleEditChange(this.role_id);
          }
          // 关闭加载状态
          this.tableLoading = false;
        })
        .catch((err) => {
          console.log(err);
          // 关闭加载状态
          this.tableLoading = false;
        });
    },

跟着这样一步步就可以 实现！加油 !