表格头部列设置功能优化,增加滚动,防止栏位太多后,整个页面上移

This commit is contained in:
xiaocp2009 2025-10-29 10:43:11 +08:00
parent 8b1227e20a
commit 68c7b6d567

View File

@ -21,7 +21,7 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
{{ $t('common.columnSetting') }}
</NButton>
</template>
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable" class="table-column-setting-list">
<div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
<SvgIcon local-icon="drag" class="mr-8px h-full cursor-move text-icon"/>
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
@ -35,4 +35,15 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
</NPopover>
</template>
<style scoped></style>
<style scoped lang="scss">
.table-column-setting-list {
max-height: 60vh;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.table-column-setting-list::-webkit-scrollbar {
display: none;
}
</style>