diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue index 279a9faca..1e045d9b1 100644 --- a/src/components/Table/src/Table.vue +++ b/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>() @@ -93,11 +93,17 @@ export default defineComponent({ } const selections = ref([]) + 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)} > {{ diff --git a/src/hooks/web/useTable.ts b/src/hooks/web/useTable.ts index 361dd6781..5ff8a519a 100644 --- a/src/hooks/web/useTable.ts +++ b/src/hooks/web/useTable.ts @@ -32,6 +32,7 @@ interface TableObject { loading: boolean exportLoading: boolean currentRow: Nullable + sort: any } export const useTable = (config?: UseTableConfig) => { @@ -53,14 +54,21 @@ export const useTable = (config?: UseTableConfig) => { // 导出加载中 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 = (config?: UseTableConfig) => { } ) + watch( + () => tableObject.sort, + () => { + methods.getList() + } + ) + // Table实例 const tableRef = ref()