列表排序实现

src/components/Table/src/Table.vue

@@ -49,7 +49,7 @@ export default defineComponent({
       default: () => []
     }
   },
-  emits: ['update:pageSize', 'update:currentPage', 'register'],
+  emits: ['update:pageSize', 'update:currentPage', 'register', 'update:sort'],
   setup(props, { attrs, slots, emit, expose }) {
     const elTableRef = ref<ComponentRef<typeof ElTable>>()
 
@@ -93,11 +93,17 @@ export default defineComponent({
     }
 
     const selections = ref<Recordable[]>([])
+    const sortRef = ref()
 
     const selectionChange = (selection: Recordable[]) => {
       selections.value = selection
     }
 
+    // 排序
+    const sortChange = (sortVal: Recordable) => {
+      sortRef.value = sortVal
+    }
+
     expose({
       setProps,
       setColumn,
@@ -121,6 +127,13 @@ export default defineComponent({
       )
     })
 
+    watch(
+      () => sortRef.value,
+      (val: any) => {
+        emit('update:sort', val)
+      }
+    )
+
     watch(
       () => unref(getProps).pageSize,
       (val: number) => {
@@ -250,6 +263,7 @@ export default defineComponent({
                 headerAlign={headerAlign}
                 {...props}
                 prop={v.field}
+                sortable={v.sort}
               >
                 {{
                   default: (data: TableSlotDefault) =>
@@ -276,6 +290,7 @@ export default defineComponent({
           ref={elTableRef}
           data={unref(getProps).data}
           onSelection-change={selectionChange}
+          onSort-change={sortChange}
           {...unref(getBindValue)}
         >
           {{

src/hooks/web/useTable.ts

@@ -32,6 +32,7 @@ interface TableObject<T = any> {
   loading: boolean
   exportLoading: boolean
   currentRow: Nullable<T>
+  sort: any
 }
 
 export const useTable = <T = any>(config?: UseTableConfig<T>) => {
@@ -53,14 +54,21 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
     // 导出加载中
     exportLoading: false,
     // 当前行的数据
-    currentRow: null
+    currentRow: null,
+    // 排序
+    sort: {
+      order: '', // 排序规则
+      prop: '' // 排序字段
+    },
   })
 
   const paramsObj = computed(() => {
     return {
       ...tableObject.params,
       pageSize: tableObject.pageSize,
-      pageNo: tableObject.currentPage
+      pageNo: tableObject.currentPage,
+      sort: tableObject.sort.prop,
+      by: tableObject.sort.order == 'descending'?'DESC':'ASC'
     }
   })
 
@@ -84,6 +92,13 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
     }
   )
 
+  watch(
+    () => tableObject.sort,
+    () => {
+      methods.getList()
+    }
+  )
+
   // Table实例
   const tableRef = ref<typeof Table & TableExpose>()