选择用户树懒加载,显示效果优化

src/components/lowCode/assistant/rangedUserTree.vue

@@ -1,5 +1,5 @@
 <script lang='ts' setup>
-import { computed, ref, watch, onBeforeMount } from 'vue'
+import { computed, ref, watch, onBeforeMount, nextTick } from 'vue'
 
 const props = withDefaults(
     defineProps<{
@@ -20,6 +20,8 @@ const emits = defineEmits<{
 const value = ref([])
 const treeData = ref([]) // 存储懒加载的数据
 const isDataLoaded = ref(false) // 标记数据是否已加载
+const loading = ref(false) // 是否正在加载
+const treeSelectRef = ref() // 树选择器引用
 
 watch(value, (newValue) => {
     if (newValue.length > 0) {
@@ -60,27 +62,34 @@ onBeforeMount(() => {
 const loadFullData = async () => {
     if (isDataLoaded.value) return treeData.value;
     
+    loading.value = true;
+    
     try {
-        const result = checkorgAndManTree1();
+        // 模拟数据加载过程
+        await new Promise(resolve => setTimeout(resolve, 800));
+        
+        const result = await checkorgAndManTree1();
         treeData.value = result;
         isDataLoaded.value = true;
         return result;
     } catch (error) {
         console.error('加载组织数据失败:', error);
         return [];
+    } finally {
+        loading.value = false;
     }
 }
 
 // 点击树选择器时的处理
 const handleTreeSelectClick = async () => {
-    if (!isDataLoaded.value) {
+    if (!isDataLoaded.value && !loading.value) {
         await loadFullData();
     }
 }
 
 // 下拉框显示状态变化时的处理
 const handleVisibleChange = async (visible: boolean) => {
-    if (visible && !isDataLoaded.value) {
+    if (visible && !isDataLoaded.value && !loading.value) {
         await loadFullData();
     }
 }
@@ -90,6 +99,8 @@ const resData = computed(() => {
 })
 
 function checkorgAndManTree1() {
+    return new Promise((resolve) => {
+        const check = () => {
             let result = []
             let i = 0
             props.orgAndManTree.forEach((element: any) => {
@@ -104,13 +115,14 @@ function checkorgAndManTree1() {
                         result = item.tree
                     }
                 });
-        return result
+                resolve(result)
             } else {
-        setTimeout(() => {
-            checkorgAndManTree1()
-        }, 100)
+                setTimeout(check, 100)
             }
         }
+        check()
+    })
+}
 
 /**
  * 判断树形结构是否存在节点
@@ -151,6 +163,7 @@ const valPrint = (val: any) => {
     
     <div class="tree-select-wrapper" v-if="props.types != 3">
         <el-tree-select 
+            ref="treeSelectRef"
             node-key="number" 
             v-model="value" 
             :data="resData" 
@@ -166,7 +179,14 @@ const valPrint = (val: any) => {
             @visible-change="handleVisibleChange"
             :disabled="props.disabled"
             :popper-append-to-body="false"
-        />
+        >
+            <!-- 自定义空状态 -->
+            <template #empty>
+                <div class="custom-empty">
+                    {{ loading ? '正在加载' : '无数据' }}
+                </div>
+            </template>
+        </el-tree-select>
     </div>
     <el-text v-else class="wordColor">{{ valPrint(value) }}</el-text>
 </template>
@@ -206,4 +226,12 @@ const valPrint = (val: any) => {
     margin-left: 7px;
     margin-right: 7px;
 }
+
+/* 自定义空状态样式 */
+.custom-empty {
+    padding: 10px;
+    text-align: center;
+    color: #909399;
+    font-size: 14px;
+}
 </style>