fix: 修复表格组件排序和表格设置显示

This commit is contained in:
RubyLiu 2023-08-28 15:52:37 +08:00 committed by 刘瑞斌
parent dc6eac195c
commit fcab00ec24
3 changed files with 43 additions and 16 deletions

View File

@ -12,7 +12,9 @@
:row-class="getRowClass" :row-class="getRowClass"
:selected-keys="props.selectedKeys" :selected-keys="props.selectedKeys"
:span-method="spanMethod" :span-method="spanMethod"
:columns="currentColumns"
@selection-change="(e) => selectionChange(e, true)" @selection-change="(e) => selectionChange(e, true)"
@sorter-change="(dataIndex: string,direction: string) => handleSortChange(dataIndex, direction)"
> >
<template #optional="{ rowIndex, record }"> <template #optional="{ rowIndex, record }">
<slot name="optional" v-bind="{ rowIndex, record }" /> <slot name="optional" v-bind="{ rowIndex, record }" />
@ -39,12 +41,18 @@
:tooltip="item.tooltip" :tooltip="item.tooltip"
> >
<template #title> <template #title>
<div v-if="attrs.showSetting && idx === currentColumns.length - 1" class="column-selector"> <div
v-if="props.showSetting && idx === currentColumns.length - 1"
class="flex flex-row flex-nowrap items-center"
>
<slot :name="item.titleSlotName">
<div class="title">{{ t(item.title as string) }}</div> <div class="title">{{ t(item.title as string) }}</div>
</slot>
<ColumnSelector :table-key="(attrs.tableKey as string)" @close="handleColumnSelectorClose" /> <ColumnSelector :table-key="(attrs.tableKey as string)" @close="handleColumnSelectorClose" />
</div> </div>
<slot v-else-if="item.titleSlotName" :name="item.titleSlotName" /> <slot v-else :name="item.titleSlotName">
<div v-else class="title">{{ t(item.title as string) }}</div> <div class="title">{{ t(item.title as string) }}</div>
</slot>
</template> </template>
<template #cell="{ column, record, rowIndex }"> <template #cell="{ column, record, rowIndex }">
<div class="flex flex-row flex-nowrap items-center" :class="item.isTag ? 'max-w-[360px]' : 'max-w-[300px]'"> <div class="flex flex-row flex-nowrap items-center" :class="item.isTag ? 'max-w-[360px]' : 'max-w-[300px]'">
@ -153,6 +161,7 @@
(e: 'pageChange', value: number): void; (e: 'pageChange', value: number): void;
(e: 'pageSizeChange', value: number): void; (e: 'pageSizeChange', value: number): void;
(e: 'rowNameChange', value: TableData): void; (e: 'rowNameChange', value: TableData): void;
(e: 'sorterChange', value: { [key: string]: string }): void;
}>(); }>();
const isSelectAll = ref(false); const isSelectAll = ref(false);
const attrs = useAttrs(); const attrs = useAttrs();
@ -209,6 +218,7 @@
} }
currentColumns.value = tmpArr; currentColumns.value = tmpArr;
}; };
// //
const selectionChange = (arr: (string | number)[], setCurrentSelect: boolean, isAll = false) => { const selectionChange = (arr: (string | number)[], setCurrentSelect: boolean, isAll = false) => {
setSelectAllTotal(isAll); setSelectAllTotal(isAll);
@ -268,6 +278,24 @@
editActiveKey.value = -1; editActiveKey.value = -1;
}; };
// change
const handleSortChange = (dataIndex: string, direction: string) => {
const regex = /^__arco_data_index_(\d+)$/;
const match = dataIndex.match(regex);
const lastDigit = match && (match[1] as unknown as number);
if (lastDigit) {
dataIndex = currentColumns.value[lastDigit].dataIndex as string;
}
let sortOrder = '';
if (direction === 'ascend') {
sortOrder = 'asc';
} else if (direction === 'descend') {
sortOrder = 'desc';
}
emit('sorterChange', sortOrder ? { [dataIndex]: sortOrder } : {});
};
// input // input
const handleEdit = (rowIndex: number) => { const handleEdit = (rowIndex: number) => {
editActiveKey.value = rowIndex; editActiveKey.value = rowIndex;
@ -316,11 +344,6 @@
line-height: 40px; line-height: 40px;
cursor: pointer; cursor: pointer;
} }
.column-selector {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.title { .title {
color: var(--color-text-3); color: var(--color-text-3);
} }

View File

@ -46,7 +46,7 @@ export default function useTableProps<T>(
selectedAll: false, selectedAll: false,
enableDrag: false, enableDrag: false,
showSelectAll: true, showSelectAll: true,
showSetting: true, showSetting: false,
columnResizable: true, columnResizable: true,
// 禁用 arco-table 的分页 // 禁用 arco-table 的分页
pagination: false, pagination: false,
@ -211,9 +211,8 @@ export default function useTableProps<T>(
// 事件触发组 // 事件触发组
const propsEvent = ref({ const propsEvent = ref({
// 排序触发 // 排序触发
sorterChange: (dataIndex: string, direction: string) => { sorterChange: (sortObj: { [key: string]: string }) => {
// eslint-disable-next-line no-console sortItem.value = sortObj;
sortItem.value = { [dataIndex]: direction };
loadList(); loadList();
}, },
@ -256,6 +255,10 @@ export default function useTableProps<T>(
saveCallBack(record); saveCallBack(record);
} }
}, },
// 重置排序
resetSort: () => {
sortItem.value = {};
},
}); });
return { return {

View File

@ -122,9 +122,6 @@
{ {
title: 'system.organization.subordinateOrg', title: 'system.organization.subordinateOrg',
dataIndex: 'organizationName', dataIndex: 'organizationName',
sortable: {
sortDirections: ['ascend', 'descend'],
},
}, },
{ {
title: 'system.organization.creator', title: 'system.organization.creator',
@ -135,6 +132,10 @@
title: 'system.organization.createTime', title: 'system.organization.createTime',
dataIndex: 'createTime', dataIndex: 'createTime',
width: 230, width: 230,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
}, },
{ {
title: 'system.organization.operation', title: 'system.organization.operation',