技術標籤：ant design vueant design vuea-tree樹形元件樹形元件回顯節點資料樹形元件獲取元件資料vue

1.獲取資料

首先，資料自然是tree結構的，這中間自然會有一些對資料的處理，說一下常用處理：

• 將扁平化資料處理為tree結構資料https://blog.csdn.net/thcoding_cat/article/details/113697354
• 將資料的屬性處理為元件要求的屬性
• 解決該元件的一些問題，優化

1.將資料的屬性處理為元件要求的屬性

使用元件提供的該屬性:replaceFields="{key:'id',title:'name',children:'children'}"

<a-tree
    :replaceFields="{ key:'id',title:'zhName',children:'children'}"
    v-model="checkedKeys"
/>

2.渲染完a-tree元件的時候，元件為收縮狀態，希望為展示狀態

渲染元件資料時，元件為收縮狀態，如下：

那我們想要渲染完元件是展開的，如下：

解決方法，在元件上使用v-if對渲染的資料（treeData做判斷，有資料的時候則渲染）：

<a-tree
    v-if="treeData && treeData.length > 0"
    v-model="checkedKeys"
/>
 

2.將選中的資料回顯到a-tree元件上

a-tree的元件很奇怪，獲取時，取到所有tree節點的id，回顯時卻只需要tree節點最深層的子id,很多人應該這個問題都選擇了手寫tree元件，我找了很久，終於找到了回顯的方法

參考該部落格（https://blog.csdn.net/sunnyjingqi/article/details/110202457 ，該作者寫的是react版本，但邏輯其實一樣）進行如下改造：

明確一點：我們從後端取到的節點資料為tree結構選中的所有節點的id,但實際上，我們只需要獲取最深層的子id來進行展示

1.從完整的treeData遍歷出最深層的節點（所有子節點及沒有子節點的節點）

//methods中的方法
deepList(data){
     data.map((item) => {
     if (item.children && item.children.length > 0) {
           this.deepList(item.children);
        } else {
            //test陣列存放  
            this.test.push(item.id);
        }
      });
}


//呼叫
this.deepList(this.treeData);

2.將後臺返回的資料（含父節點的）與該deepList方法遍歷出來的結果test陣列做一個交集，即取到選中的子節點

//tmpList 後臺拿到的結果，為字串陣列，存放的是節點id
const result = [...new Set(this.test)].filter((item) => new Set(eval(this.tmpList)).has(item));

//將結果賦值給v-model繫結的屬性
this.checkedKeys = [...result];

3.善後（對a-tree的一些優化處理）

• 有些從後臺拿到的資料不是字串陣列，需進行處理，其次，處理後的結構（比如a陣列）可能還需要賦值給別的變數（比如a陣列賦值給b陣列）可將b陣列用於一些判斷（比如判斷a-tree元件節點是否有被選中等等）
• 從後臺獲取選中的節點資料時，對spinning值（ant design vue的Spin元件）進行變化，這樣在選中的節點資料渲染上時會有一個蒙層載入的效果，如下：

<a-spin :spinning="spinning">
   <div class="spin-content">
        <a-tree
         v-if="treeData && treeData.length > 0" 
         :tree-data="treeData"
         class="tree"
         :replaceFields="{ key:'id',title:'name',children:'children'}"
         v-model="checkedKeys"
        />
    </div>
</a-spin>