element-ui 联级选择器组件 编辑回显数据

1. 大部分情况下,新增完表单后,存放在数据库里的值一般都只是一个 数字id, 如果想要组件回显, 就重组联级组件需要的数组变量

例: 现在element-ui 支持联级又多选的方式,最终v-model绑定的值的结构就是一个 二位数组

//使用方法
this.completeCharge(
        {
          valueList: this.formValue, //数据库存放的值,(数组)
          data: this.options,           //联级绑定的options(树形结构)
          valueName: "id",            //设置你的树形结构想要获取到的key
          childrenName: "children",//设置你的树形结构的子数组key
          callback(value) {   //回调 可能多次触发
            t.category.push(value);  //value就是一个数组,对应一个联级选中的值
          }
        }
      );    
completeCharge(data, array = []) {
      let arr = [...array]
      for (let item of data.data) {
        arr.push(item[data.valueName]);
        if (item[data.childrenName] && item[data.childrenName].length > 0) {
          this.completeCharge(
            {
              valueList: data.valueList,
              valueName: data.valueName,
              childrenName: data.childrenName,
              data: item[data.childrenName],
              callback: data.callback
            },
            [...arr]
          );
        } else {
          if (data.valueList.includes(item[data.valueName])) {
            data.callback([...arr])
          }
        }
        arr.pop()
      }
    }
原文地址:https://www.cnblogs.com/gosh-hash/p/11165605.html