ant design vue中使用TreeSelect懶加載

 

項目中使用下拉機構懶加載，tree Select控件。

       <a-tree-select
            v-model="form1.constructionCompany"
            style="width: 100%"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            :replace-fields="{children:'children', key:'id', value: 'label'}"
            :tree-data="orgTree"
            :load-data="onLoadData"
            placeholder="請選擇施工單位"
            allow-clear>                           
        </a-tree-select>

　　其中要指定唯一的key值，我這里id是唯一的

       onLoadData(treeNode) {
          const _this = this;
          return new Promise((resolve) => {
            if (Array.isArray(treeNode.dataRef.children) && treeNode.dataRef.children.length) {
              console.log('treeNode.dataRef.children', treeNode.dataRef.children);
              resolve()
              return
            } 
            //如果沒有值，根據當前節點id獲取子節點並掛在樹節點中，添加到對應父節點的children中
            publicapi.constructionQueryOrg(treeNode.dataRef.id).then((res) => {
                treeNode.dataRef.children = res;
                _this.orgTree = [..._this.orgTree];
                console.log('treeNode.dataRef.children', treeNode.dataRef.children);
            }).catch();
            resolve()
          })
        }