fix: 修复表格组件排序和表格设置显示
This commit is contained in:
parent
dc6eac195c
commit
fcab00ec24
|
@ -12,7 +12,9 @@
|
|||
:row-class="getRowClass"
|
||||
:selected-keys="props.selectedKeys"
|
||||
:span-method="spanMethod"
|
||||
:columns="currentColumns"
|
||||
@selection-change="(e) => selectionChange(e, true)"
|
||||
@sorter-change="(dataIndex: string,direction: string) => handleSortChange(dataIndex, direction)"
|
||||
>
|
||||
<template #optional="{ rowIndex, record }">
|
||||
<slot name="optional" v-bind="{ rowIndex, record }" />
|
||||
|
@ -39,12 +41,18 @@
|
|||
:tooltip="item.tooltip"
|
||||
>
|
||||
<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>
|
||||
</slot>
|
||||
<ColumnSelector :table-key="(attrs.tableKey as string)" @close="handleColumnSelectorClose" />
|
||||
</div>
|
||||
<slot v-else-if="item.titleSlotName" :name="item.titleSlotName" />
|
||||
<div v-else class="title">{{ t(item.title as string) }}</div>
|
||||
<slot v-else :name="item.titleSlotName">
|
||||
<div class="title">{{ t(item.title as string) }}</div>
|
||||
</slot>
|
||||
</template>
|
||||
<template #cell="{ column, record, rowIndex }">
|
||||
<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: 'pageSizeChange', value: number): void;
|
||||
(e: 'rowNameChange', value: TableData): void;
|
||||
(e: 'sorterChange', value: { [key: string]: string }): void;
|
||||
}>();
|
||||
const isSelectAll = ref(false);
|
||||
const attrs = useAttrs();
|
||||
|
@ -209,6 +218,7 @@
|
|||
}
|
||||
currentColumns.value = tmpArr;
|
||||
};
|
||||
|
||||
// 选择公共执行方法
|
||||
const selectionChange = (arr: (string | number)[], setCurrentSelect: boolean, isAll = false) => {
|
||||
setSelectAllTotal(isAll);
|
||||
|
@ -268,6 +278,24 @@
|
|||
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
|
||||
const handleEdit = (rowIndex: number) => {
|
||||
editActiveKey.value = rowIndex;
|
||||
|
@ -316,11 +344,6 @@
|
|||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.column-selector {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
|
|
@ -46,7 +46,7 @@ export default function useTableProps<T>(
|
|||
selectedAll: false,
|
||||
enableDrag: false,
|
||||
showSelectAll: true,
|
||||
showSetting: true,
|
||||
showSetting: false,
|
||||
columnResizable: true,
|
||||
// 禁用 arco-table 的分页
|
||||
pagination: false,
|
||||
|
@ -211,9 +211,8 @@ export default function useTableProps<T>(
|
|||
// 事件触发组
|
||||
const propsEvent = ref({
|
||||
// 排序触发
|
||||
sorterChange: (dataIndex: string, direction: string) => {
|
||||
// eslint-disable-next-line no-console
|
||||
sortItem.value = { [dataIndex]: direction };
|
||||
sorterChange: (sortObj: { [key: string]: string }) => {
|
||||
sortItem.value = sortObj;
|
||||
loadList();
|
||||
},
|
||||
|
||||
|
@ -256,6 +255,10 @@ export default function useTableProps<T>(
|
|||
saveCallBack(record);
|
||||
}
|
||||
},
|
||||
// 重置排序
|
||||
resetSort: () => {
|
||||
sortItem.value = {};
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
|
|
|
@ -122,9 +122,6 @@
|
|||
{
|
||||
title: 'system.organization.subordinateOrg',
|
||||
dataIndex: 'organizationName',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'system.organization.creator',
|
||||
|
@ -135,6 +132,10 @@
|
|||
title: 'system.organization.createTime',
|
||||
dataIndex: 'createTime',
|
||||
width: 230,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
sorter: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'system.organization.operation',
|
||||
|
|
Loading…
Reference in New Issue