perf(表格组件): 树形表格现在有加载动画

src/components/table/CustomTable.vue

@@ -7,6 +7,7 @@ import { fuzzySearch, throttleFunc } from '@/utils/common'
 
 import { useTable } from '@/hooks/useTable.ts'
 import { useRequest } from '@/hooks/useRequest.ts'
+
 import {
   computed,
   type ComputedRef,
@@ -48,6 +49,9 @@ const props = withDefaults(defineProps<PropsParams>(), {
 
 const emits = defineEmits(['addNewItem', 'upload', 'downLoad'])
 
+// 用于维护展开行的加载状态
+const loadingRows = ref<Set<any>>(new Set())
+
 // 加载动画
 const loading = ref(false)
 
@@ -60,6 +64,9 @@ const expandTableData: Record<string, Array<any>> = reactive({})
 // 分页展开表格数据
 const expandPaginationConfig = reactive<Record<string, TablePaginationSetting>>({})
 
+/**
+ * 分页展开表格数据
+ */
 const expandPageData = computed(() => {
   const nowActive = activeExpandTablePageConfig.value
   const { currentPage, limit } = expandPaginationConfig[nowActive]
@@ -461,53 +468,69 @@ const getRowKey = (row: any) => {
   return id + ''
 }
 
+/**
+ * 处理表格展开事件
+ * @param row
+ * @param expandedRows
+ */
 const handleExpand = async (row: any, expandedRows: any[]) => {
-  if (!props.expandConfig) return
-
-  let id = row['actionId'] ?? row['id']
-  if (!id) {
-    console.warn('请检查表格数据，没有可用的ID 作为RowKey，当前使用随机key')
-    id = createRowKey()
-  }
+  try {
+    console.log(expandedRows)
+    console.log(row)
+
+    if (!props.expandConfig) return
+    loadingRows.value.add(row)
+    let id = row['actionId'] ?? row['id']
+    if (!id) {
+      console.warn('请检查表格数据，没有可用的ID 作为RowKey，当前使用随机key')
+      id = createRowKey()
+    }
 
-  // expandRowKeys.value.push(id)
-  if (expandedRows.length) {
-    //展开
-    expandRowKeys.value = [] //先干掉之前展开的行
-    if (row) {
-      expandRowKeys.value.push(id) //push新的行 (原理有点类似防抖)
+    // expandRowKeys.value.push(id)
+    if (expandedRows.length) {
+      //展开
+      expandRowKeys.value = [] //先干掉之前展开的行
+      if (row) {
+        expandRowKeys.value.push(id) //push新的行 (原理有点类似防抖)
+      }
+    } else {
+      expandRowKeys.value = [] //折叠 就清空expand-row-keys对应的数组
     }
-  } else {
-    expandRowKeys.value = [] //折叠 就清空expand-row-keys对应的数组
-  }
 
-  activeExpandTablePageConfig.value = id
-  if (!expandPaginationConfig[id]) {
-    expandPaginationConfig[id] = {
-      currentPage: 1,
-      limit: 10,
-      total: 0,
-      pageSizeList: [10, 20, 30]
+    activeExpandTablePageConfig.value = id
+    if (!expandPaginationConfig[id]) {
+      expandPaginationConfig[id] = {
+        currentPage: 1,
+        limit: 10,
+        total: 0,
+        pageSizeList: [10, 20, 30]
+      }
     }
-  }
 
-  // 有数据后就不要重新请求数据
-  // 这里只判断是否已经请求过了，而不判断是否有数据，防止重复请求
-  if (expandTableData[id] !== undefined) return
-  const params = {
-    ...props.expandConfig.expandReqConfig.otherOptions,
-    actionId: id + ''
-  }
-  const res = (await axiosInstance.post(
-    props.expandConfig.expandReqConfig.url,
-    params
-  )) as ResponseInfo
-  if (res.code !== 0) {
+    // 有数据后就不要重新请求数据
+    // 这里只判断是否已经请求过了，而不判断是否有数据，防止重复请求
+    if (expandTableData[id] !== undefined) return
+    const params = {
+      ...props.expandConfig.expandReqConfig.otherOptions,
+      actionId: id + ''
+    }
+    const res = (await axiosInstance.post(
+      props.expandConfig.expandReqConfig.url,
+      params
+    )) as ResponseInfo
+    if (res.code !== 0) {
+      ElMessage.error('获取展开信息失败')
+      return
+    }
+    expandTableData[id] = res.data
+    expandPaginationConfig[id].total = res.data?.length ?? 0
+  } catch (err) {
+    console.error(err)
     ElMessage.error('获取展开信息失败')
-    return
+  } finally {
+    console.log('ok')
+    loadingRows.value.delete(row)
   }
-  expandTableData[id] = res.data
-  expandPaginationConfig[id].total = res.data.length
 }
 
 const handleExpandPageChange = (page: number) => {
@@ -565,15 +588,6 @@ const handleRowClass = (row: any, _rowIndex: number): string => {
         </span>
       </p>
 
-      <!-- 没有分页的时候需要重新计算一下data -->
-      <!--      :show-summary="props.needTotal"-->
-      <!--      :summary-method="-->
-      <!--      () => {-->
-      <!--      if (props.totalFunc) {-->
-      <!--      return props.totalFunc(tableData, paginationConfig.total)-->
-      <!--      }-->
-      <!--      return []    "-->
-      <!--      }-->
       <el-table
         :data="
           openRemoteReqData && openRemoteQuery
@@ -601,7 +615,7 @@ const handleRowClass = (row: any, _rowIndex: number): string => {
         />
         <el-table-column align="center" show-overflow-tooltip type="expand" v-if="props.needExpand">
           <template #default="rowInfo">
-            <el-table :data="expandPageData">
+            <el-table :data="expandPageData" v-loading="loadingRows.has(rowInfo.row)">
               <template v-for="child in props.expandConfig?.expandField" :key="child.name">
                 <el-table-column
                   :prop="child.name"
@@ -618,12 +632,6 @@ const handleRowClass = (row: any, _rowIndex: number): string => {
                       :need-average="props.needAverage"
                     ></TableColumn>
                   </template>
-                  <!--                              {{ expandTableData[rowInfo.row.actionId] }}-->
-                  <!--                  <TableColumn-->
-                  <!--                    :column-config="child"-->
-                  <!--                    :row="rowInfo.row"-->
-                  <!--                    :need-average="rowInfo.needAverage"-->
-                  <!--                  ></TableColumn>-->
                 </el-table-column>
               </template>
             </el-table>