element-ui 聯級選擇器組件 編輯回顯數據

1. 大部分狀況下,新增完表單後,存放在數據庫裏的值通常都只是一個 數字id, 若是想要組件回顯, 就重組聯級組件須要的數組變量數據庫

例: 如今element-ui 支持聯級又多選的方式,最終v-model綁定的值的結構就是一個 二位數組element-ui

//使用方法
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()
      }
    }
相關文章
相關標籤/搜索