技術標籤：vuejsvue.jsjavascripthtml

當級聯選擇器為詳情頁面，只展示回顯資料文字

<span v-else :class="componentProps.option.cssClass">{{getCheckValue(value)}}</span>

 /**
  * 處理詳情資料
  * @param value 選中value預設值
  */
 getCheckValue(value){
     let str = ''
     if(value){
         let val = this.componentProps.
 
option.multiple?value:[value];//多選預設是二維陣列，單選改為二維陣列，統一處理資料。例：[["option1","option1-1","option1-1-1"],["option3"]]
         val.map((item,indexValue) =>{//[["option1","option1-1","option1-1-1"],["option3"]]
             let arr =
 
 '';
             item.map((itemValue,index) => {//["option1","option1-1","option1-1-1"]
                 if (index + 1 == item.length) {//若數組裡只有一個元素 ["option3"]
                 	arr += this.valueTest(itemValue);
                 }else{//["option1","option1-1","option1-1-1"]
 

                     arr += this.valueTest(itemValue)+"/";
                 } 
             })
             if (indexValue == 0) {//第一個值沒有分隔
                 str += arr;
             }else{
                 str = str +","+ arr;
             }
         })
         return str;
     }
 },
 /**
  * 遞迴
  * @param itemValue 預設值
  */
 valueTest(itemValue){
     let itemText = "";
     if (!this.dataList && this.dataList.legth <= 0) return;//若dataList不存在直接return
     funValue(this.dataList); //呼叫封裝好的回顯函式
     function funValue(childrenArr) {
         for (let item of childrenArr) {//遍歷陣列
             if (item.value === itemValue) {//判斷所在陣列，是否有匹配的value
                 itemText = item.text;
             }  
             if (item.children &&item.children.length > 0) {//判斷value不匹配的層級是否具有children
                 funValue(item.children);//存在children就回調
             } 
         }
     }
     return itemText;//遞迴出口
 },

處理空陣列

/**
 * 處理資料，去掉空children
  * @param data 要處理的資料
  */
 getTreeData(data){
     // 迴圈遍歷json資料
     data?data.forEach((item) => {
         if(item.children&&item.children.length<1){
             // children若為空陣列，則將children設為undefined
             item.children=undefined;
         }else {
             // children若不為空陣列，則繼續 遞迴呼叫 本方法
             this.getTreeData(item.children);
         }
     }):[];
     return data;
 },