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()
      }
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM