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,36 +43,41 @@ const [registerTable, { setTableData }] = useTable({
 })
 // 页面挂载时批量请求并更新数据（避免在模板中调用异步）
 onBeforeUpdate(async () => {
-  const rr = [] as any[]
-  const rows = props.data.Content || []
-  for (const item of rows) {
-    try {
+  loading.value = true
+  try {
+    const rr = [] as any[]
+    const rows = props.data.Content || []
+    for (const item of rows) {
+      try {
       // 如果后端需要同时传 ObservedPoint 和 PredictedPoint，用逗号拼接（请根据后端接口调整）
-      const param = item.PredictedPoint ? `${item.ObservedPoint},${item.PredictedPoint}` : `${item.ObservedPoint}`
-      const res = await getExaNow(param)
+        const param = item.PredictedPoint ? `${item.ObservedPoint},${item.PredictedPoint}` : `${item.ObservedPoint}`
+        const res = await getExaNow(param)
 
-      let origin: any = '-'
-      let predict: any = '-'
-      if (res != null) {
-        if (Array.isArray(res)) {
-          origin = res[0] ?? '-'
-          predict = res[1] ?? '-'
-        }
-        else if (typeof res === 'object') {
-          origin = res.originValue ?? res[0] ?? '-'
-          predict = res.predictValue ?? res[1] ?? '-'
-        }
-        else {
-          origin = String(res)
+        let origin: any = '-'
+        let predict: any = '-'
+        if (res != null) {
+          if (Array.isArray(res)) {
+            origin = res[0] ?? '-'
+            predict = res[1] ?? '-'
+          }
+          else if (typeof res === 'object') {
+            origin = res.originValue ?? res[0] ?? '-'
+            predict = res.predictValue ?? res[1] ?? '-'
+          }
+          else {
+            origin = String(res)
+          }
         }
+        rr.push(Object.assign({}, item, { originValue: origin, predictValue: predict }))
+      }
+      catch (e) {
       }
-      rr.push(Object.assign({}, item, { originValue: origin, predictValue: predict }))
-    }
-    catch (e) {
     }
+    setTableData(rr)
+  }
+  finally {
+    loading.value = false
   }
-
-  setTableData(rr)
 })
 </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>