feat(BasicTree): 支持设置加载中

src/components/Tree/src/Tree.vue

@@ -14,7 +14,7 @@
     onMounted,
   } from 'vue';
   import TreeHeader from './TreeHeader.vue';
-  import { Tree, Empty } from 'ant-design-vue';
+  import { Tree, Spin, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
   import { ScrollContainer } from '/@/components/Container';
   import { omit, get, difference, cloneDeep } from 'lodash-es';
@@ -426,10 +426,16 @@
                 {extendSlots(slots)}
               </TreeHeader>
             )}
-            <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
-              <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
-            </ScrollContainer>
-            <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
+            <Spin spinning={unref(props.loading)} tip="加载中...">
+              <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
+                <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
+              </ScrollContainer>
+              <Empty
+                v-show={unref(getNotFound)}
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                class="!mt-4"
+              />
+            </Spin>
           </div>
         );
       };

src/components/Tree/src/tree.ts

@@ -130,6 +130,10 @@ export const treeProps = buildProps({
   checkOnSearch: Boolean,
   // 搜索完成自动select所有结果
   selectedOnSearch: Boolean,
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 export type TreeProps = ExtractPropTypes<typeof treeProps>;

src/views/demo/tree/index.vue

@@ -32,7 +32,7 @@
           :load-data="onLoadData"
         />
       </Col>
-      <Col :span="16">
+      <Col :span="8">
         <Card title="异步数据，默认展开">
           <template #extra>
             <a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
@@ -42,6 +42,14 @@
           </Spin>
         </Card>
       </Col>
+      <Col :span="8">
+        <Card title="BasicTree内置加载">
+          <template #extra>
+            <a-button @click="loadTreeData2" :loading="treeLoading">请求数据</a-button>
+          </template>
+          <BasicTree ref="loadTreeRef" :treeData="tree2" :loading="treeLoading" />
+        </Card>
+      </Col>
     </Row>
   </PageWrapper>
 </template>
@@ -58,6 +66,7 @@
     setup() {
       const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
       const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
+      const loadTreeRef = ref<Nullable<TreeActionType>>(null);
       const tree2 = ref<TreeItem[]>([]);
       const treeLoading = ref(false);
 
@@ -79,6 +88,15 @@
           });
         }, 2000);
       }
+      function loadTreeData2() {
+        treeLoading.value = true;
+        // 以下是模拟异步获取数据
+        setTimeout(() => {
+          // 设置数据源
+          tree2.value = cloneDeep(treeData);
+          treeLoading.value = false;
+        }, 2000);
+      }
 
       const tree = ref([
         {
@@ -119,9 +137,11 @@
         onLoadData,
         asyncTreeRef,
         asyncExpandTreeRef,
+        loadTreeRef,
         tree2,
         loadTreeData,
         treeLoading,
+        loadTreeData2,
       };
     },
   });