mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-18 01:36:37 +08:00
37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
<script setup lang="ts" generic="T extends Record<string, unknown>, K = never">
|
|
import { VueDraggable } from 'vue-draggable-plus';
|
|
import type { FilteredColumn } from '@/hooks/common/table';
|
|
import { $t } from '@/locales';
|
|
|
|
defineOptions({
|
|
name: 'TableColumnSetting'
|
|
});
|
|
|
|
const columns = defineModel<FilteredColumn[]>('columns', {
|
|
required: true
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NPopover placement="bottom-end" trigger="click">
|
|
<template #trigger>
|
|
<NButton size="small">
|
|
<template #icon>
|
|
<icon-ant-design-setting-outlined class="text-icon" />
|
|
</template>
|
|
{{ $t('common.columnSetting') }}
|
|
</NButton>
|
|
</template>
|
|
<VueDraggable v-model="columns">
|
|
<div v-for="item in columns" :key="item.key" class="flex-y-center h-36px hover:(bg-primary bg-opacity-20) rd-4px">
|
|
<icon-mdi-drag class="mr-8px text-icon cursor-move" />
|
|
<NCheckbox v-model:checked="item.checked">
|
|
{{ item.title }}
|
|
</NCheckbox>
|
|
</div>
|
|
</VueDraggable>
|
|
</NPopover>
|
|
</template>
|
|
|
|
<style scoped></style>
|