需求变更整改

src/components/table/index.vue

@@ -1,23 +1,44 @@
 <template>
     <div :style="{ height: tableStore.table.height }">
-        <vxe-table ref="tableRef" height="auto" :data="tableStore.table.data" v-loading="tableStore.table.loading"
-            v-bind="Object.assign({}, defaultAttribute, $attrs)" @checkbox-all="selectChangeEvent"
-            @checkbox-change="selectChangeEvent" :showOverflow="showOverflow">
+        <vxe-table
+            ref="tableRef"
+            height="auto"
+            :key="key"
+            :data="tableStore.table.data"
+            v-loading="tableStore.table.loading"
+            v-bind="Object.assign({}, defaultAttribute, $attrs)"
+            @checkbox-all="selectChangeEvent"
+            @checkbox-change="selectChangeEvent"
+            :showOverflow="showOverflow"
+            :sort-config="{ remote: true }"
+            @sort-change="handleSortChange"
+        >
             <!-- Column 组件内部是 el-table-column -->
             <template v-if="isGroup">
                 <GroupColumn :column="tableStore.table.column" />
             </template>
             <template v-else>
-                <Column :attr="item" :key="key + '-column'" v-for="(item, key) in tableStore.table.column"
-                    :tree-node="item.treeNode">
+                <Column
+                    :attr="item"
+                    :key="key + '-column'"
+                    v-for="(item, key) in tableStore.table.column"
+                    :tree-node="item.treeNode"
+                >
                     <!-- tableStore 预设的列 render 方案 -->
                     <template v-if="item.render" #default="scope">
-                        <FieldRender :field="item" :row="scope.row" :column="scope.column" :index="scope.rowIndex" :key="key +
-                            '-' +
-                            item.render +
-                            '-' +
-                            (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
-                            " />
+                        <FieldRender
+                            :field="item"
+                            :row="scope.row"
+                            :column="scope.column"
+                            :index="scope.rowIndex"
+                            :key="
+                                key +
+                                '-' +
+                                item.render +
+                                '-' +
+                                (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                            "
+                        />
                     </template>
                 </Column>
             </template>
@@ -26,11 +47,16 @@
     </div>
 
     <div v-if="tableStore.showPage" class="table-pagination">
-        <el-pagination :currentPage="tableStore.table.params!.pageNum" :page-size="tableStore.table.params!.pageSize"
-            :page-sizes="pageSizes" background
+        <el-pagination
+            :currentPage="tableStore.table.params!.pageNum"
+            :page-size="tableStore.table.params!.pageSize"
+            :page-sizes="pageSizes"
+            background
             :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
-            :total="tableStore.table.total" @size-change="onTableSizeChange"
-            @current-change="onTableCurrentChange"></el-pagination>
+            :total="tableStore.table.total"
+            @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"
+        ></el-pagination>
     </div>
     <slot name="footer"></slot>
 </template>
@@ -51,7 +77,7 @@ const config = useConfig()
 const tableRef = ref<VxeTableInstance>()
 const tableStore = inject('tableStore') as TableStoreClass
 const router = useRouter()
-
+const key = ref(0)
 interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
     isGroup?: boolean
     showOverflow?: boolean
@@ -82,7 +108,32 @@ const pageSizes = computed(() => {
     }
     return defaultSizes
 })
+const handleSortChange = ({ field, order }: any) => {
+    // console.log('🚀 ~ handleSortChange ~ prop, order :', field, order)
+    if (field && order) {
+        // 根据当前排序条件对所有数据进行排序
+        const list = tableStore.table.copyData.sort((a, b) => {
+            if (order === 'asc') {
+                return a[field] > b[field] ? 1 : -1
+            } else {
+                return a[field] < b[field] ? 1 : -1
+            }
+        })
+        console.log(tableStore.isWebPaging)
 
+        if (tableStore.isWebPaging) {
+            tableStore.table.data = JSON.parse(
+                JSON.stringify(
+                    window.XEUtils.chunk(list, tableStore.table.params!.pageSize)[tableStore.table.params!.pageNum - 1]
+                )
+            )
+        } else {
+            tableStore.table.data = JSON.parse(JSON.stringify(list))
+        }
+
+        // key.value += 1
+    }
+}
 /*
  * 记录选择的项
  */
@@ -98,8 +149,6 @@ watch(
     () => tableStore.table.allFlag,
     newVal => {
         if (tableStore.table.allFlag) {
-            console.log("🚀 ~  tableStore.table:",  tableStore.exportName || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '')
-
             tableRef.value?.exportData({
                 filename: tableStore.exportName || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
                 sheetName: 'Sheet1',
@@ -107,14 +156,15 @@ watch(
                 useStyle: true,
                 data: tableStore.table.allData, // 数据源 // 过滤那个字段导出
                 columnFilterMethod: function (column: any) {
-                    return !(column.column.title === undefined || column.column.title === '序号' || column.column.title === '操作')
+                    return !(
+                        column.column.title === undefined ||
+                        column.column.title === '序号' ||
+                        column.column.title === '操作'
+                    )
                 }
             })
             tableStore.table.allFlag = false
-
         }
-
-
     }
 )
 watch(