fix: 修复表格组件排序和表格设置显示
This commit is contained in:
parent
dc6eac195c
commit
fcab00ec24
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue