fix:表格加loading增加用户体验

src/views/dashboard/demo/components/ParameterInfo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Card } from 'ant-design-vue'
-import { onBeforeUpdate, onMounted, onUpdated, toRefs, watch } from 'vue'
+import { onBeforeUpdate, onMounted, onUpdated, ref, toRefs, watch } from 'vue'
 import { BasicTable, useTable } from '@/components/Table'
 import { getExaNow } from '@/api/alert/exa'
 
@@ -10,6 +10,9 @@ const props = defineProps({
     default: () => {},
   },
 })
+
+const loading = ref(false)
+
 watch(
   () => props.data,
   (newValue, oldValue) => {
@@ -40,6 +43,8 @@ const [registerTable, { setTableData }] = useTable({
 })
 // 页面挂载时批量请求并更新数据（避免在模板中调用异步）
 onBeforeUpdate(async () => {
+  loading.value = true
+  try {
     const rr = [] as any[]
     const rows = props.data.Content || []
     for (const item of rows) {
@@ -68,8 +73,11 @@ onBeforeUpdate(async () => {
       catch (e) {
       }
     }
-
     setTableData(rr)
+  }
+  finally {
+    loading.value = false
+  }
 })
 </script>
 
@@ -80,7 +88,7 @@ onBeforeUpdate(async () => {
         更多
       </a-button>
     </template> -->
-    <BasicTable style="min-height:30vh" @register="registerTable">
+    <BasicTable style="min-height:30vh" :loading="loading" @register="registerTable">
       <template #threshold="{ record }">
         <span>{{ getInterval(record) }}</span>
       </template>