bf1942/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2026-03-29 03:07:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): Column settings support fixed columns.

Browse Source
This commit is contained in:
xlsea
2025-12-31 11:58:10 +08:00
committed by Soybean
parent 232e1ac40d
commit 706586439d
7 changed files with 67 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/advanced/table-column-setting.vue
View File

@@ -9,6 +9,19 @@ defineOptions({
const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
required: true
});
const tooltipRecord: Record<NaiveUI.TableColumnFixed, App.I18n.I18nKey> = {
left: 'datatable.fixed.right',
right: 'datatable.fixed.unFixed',
unFixed: 'datatable.fixed.left'
};
function handleFixed(column: NaiveUI.TableColumnCheck) {
const fixedOptions: NaiveUI.TableColumnFixed[] = ['left', 'right', 'unFixed'];
const index = fixedOptions.findIndex(item => item === column.fixed);
const nextIndex = index === fixedOptions.length - 1 ? 0 : index + 1;
column.fixed = fixedOptions[nextIndex];
}
</script>
<template>
@@ -25,16 +38,29 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
<div
v-for="item in columns"
:key="item.key"
class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
class="h-36px flex-y-center justify-between gap-6px"
:class="{ hidden: !item.visible }"
>
<icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
<template v-if="typeof item.title === 'function'">
<component :is="item.title" />
</template>
<template v-else>{{ item.title }}</template>
</NCheckbox>
<div class="flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
<icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
<template v-if="typeof item.title === 'function'">
<component :is="item.title" />
</template>
<template v-else>{{ item.title }}</template>
</NCheckbox>
</div>
<ButtonIcon
:disabled="!item.checked"
text
:focusable="false"
:tooltip-content="$t(tooltipRecord[item.fixed!])"
@click="handleFixed(item)"
>
<icon-octicon-pin-16 v-if="item.fixed === 'unFixed'" />
<icon-octicon-pin-16 v-else-if="item.fixed === 'left'" class="rotate-270" />
<icon-octicon-pin-slash-16 v-else />
</ButtonIcon>
</div>
</VueDraggable>
</NPopover>