diff --git a/components.d.ts b/components.d.ts index c69eab31..3e725e7c 100644 --- a/components.d.ts +++ b/components.d.ts @@ -10,6 +10,5 @@ declare module '@vue/runtime-core' { RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] - TableSetting: typeof import('./src/components/RayTable/src/components/TableSetting/index.vue')['default'] } } diff --git a/src/components/RayTable/src/components/TableSetting/hook.ts b/src/components/RayTable/src/components/TableSetting/hook.ts new file mode 100644 index 00000000..5314b758 --- /dev/null +++ b/src/components/RayTable/src/components/TableSetting/hook.ts @@ -0,0 +1,19 @@ +import type { ActionOptions } from '@/components/RayTable/src/type' + +export const setupSettingOptions = (options: ActionOptions[]) => { + const arr = options.map((curr) => { + if (curr.fixed) { + curr.fixed === 'right' + ? (curr.rightFixedActivated = true) + : (curr.leftFixedActivated = true) + } + + if (curr.resizable) { + curr.resizeColumnActivated = true + } + + return curr + }) + + return arr +} diff --git a/src/components/RayTable/src/components/TableSetting/index.scss b/src/components/RayTable/src/components/TableSetting/index.scss index 961a9b36..222251ea 100644 --- a/src/components/RayTable/src/components/TableSetting/index.scss +++ b/src/components/RayTable/src/components/TableSetting/index.scss @@ -2,10 +2,15 @@ $iconSpace: 5px; $width: 140px; $activedColor: #2080f0; +.ray-table__setting:hover { + transform: rotate(180deg); + transition: transform 0.3s var(--r-bezier); +} + .ray-table__setting-option--draggable { display: grid; grid-template-columns: repeat(1, $width); - grid-gap: 10px 0; + grid-row-gap: 10px; justify-items: center; align-items: center; justify-content: center; diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RayTable/src/components/TableSetting/index.tsx index a3d06b07..ecec51ce 100644 --- a/src/components/RayTable/src/components/TableSetting/index.tsx +++ b/src/components/RayTable/src/components/TableSetting/index.tsx @@ -13,11 +13,13 @@ import './index.scss' import { NCard, NPopover, NEllipsis, NCheckbox } from 'naive-ui' import RayIcon from '@/components/RayIcon/index' import VueDraggable from 'vuedraggable' +import { setupSettingOptions } from './hook' import type { RayTableProvider, - SettingOptions, ActionOptions, + FixedType, + TableSettingFixedPopoverIcon, } from '@/components/RayTable/src/type' const TableSetting = defineComponent({ @@ -25,30 +27,59 @@ const TableSetting = defineComponent({ emits: ['columnsUpdate'], setup(_, { emit }) { const rayTableProvider = inject('rayTableProvider', {} as RayTableProvider) - const settingOptions = ref(rayTableProvider.modelColumns.value) // 表格表头 + const settingOptions = ref( + setupSettingOptions(rayTableProvider.modelColumns.value), + ) // 表格表头 const disableDraggable = ref(true) // 拖拽开关 const handleDraggableEnd = () => { emit('columnsUpdate', settingOptions.value) } + const FixedPopoverIcon = (options: TableSettingFixedPopoverIcon) => { + const { element, name, tooltip, fn, index, fixed, key } = options + + return ( + + {{ + trigger: () => ( + + ), + default: () => tooltip, + }} + + ) + } /** * * @param type 列所需固定方向 * @param idx 当前操作栏索引位置 * - * @remark 操作栏锁定列 + * @remark 操作栏锁定列, 不能同时存在两种状态(互斥) */ - const handleFiexClick = (type: 'left' | 'right', idx: number) => { - const key = `${type}FiexActivated` + const handleFixedClick = (type: FixedType, idx: number) => { + const key = `${type}FixedActivated` const value = settingOptions.value[idx] + if (key === 'leftFixedActivated') { + value['rightFixedActivated'] = false + } else if (key === 'rightFixedActivated') { + value['leftFixedActivated'] = false + } + value[key] = !value[key] if (value[key]) { value.fixed = type } else { - value.fixed = void 0 + value.fixed = undefined } settingOptions.value[idx] = value @@ -56,11 +87,30 @@ const TableSetting = defineComponent({ emit('columnsUpdate', settingOptions.value) } + /** + * + * @param idx 索隐 + * + * @remark 动态设置列宽度 + */ + const handleResizeColumnClick = (idx: number) => { + const value = settingOptions.value[idx] + + value['resizeColumnActivated'] = !value['resizeColumnActivated'] + value['resizable'] = value['resizeColumnActivated'] + + settingOptions.value[idx] = value + + emit('columnsUpdate', settingOptions.value) + } + return { settingOptions, handleDraggableEnd, - handleFiexClick, + handleFixedClick, disableDraggable, + FixedPopoverIcon, + handleResizeColumnClick, } }, render() { @@ -102,48 +152,44 @@ const TableSetting = defineComponent({ {element.title} + {this.FixedPopoverIcon({ + element: element, + name: 'left_arrow', + tooltip: '左固定', + fn: this.handleFixedClick, + index, + fixed: 'left', + key: 'leftFixedActivated', + })} {{ trigger: () => ( ), - default: () => '向左固定', - }} - - - {{ - trigger: () => ( - - ), - default: () => '向右固定', + default: () => '修改列宽', }} + {this.FixedPopoverIcon({ + element: element, + name: 'right_arrow', + tooltip: '右固定', + fn: this.handleFixedClick, + index, + fixed: 'right', + key: 'rightFixedActivated', + })} ), }} diff --git a/src/components/RayTable/src/type.ts b/src/components/RayTable/src/type.ts index 978e2299..d932d867 100644 --- a/src/components/RayTable/src/type.ts +++ b/src/components/RayTable/src/type.ts @@ -8,8 +8,21 @@ import type { import type { ComputedRef, WritableComputedRef } from 'vue' export interface ActionOptions extends DataTableBaseColumn { - leftFiexActivated?: boolean // 向左固定 - rightFiexActivated?: boolean // 向右固定 + leftFixedActivated?: boolean // 向左固定 + rightFixedActivated?: boolean // 向右固定 + resizeColumnActivated?: boolean // 拖拽表格列 +} + +export type FixedType = 'left' | 'right' | undefined + +export interface TableSettingFixedPopoverIcon { + element: ActionOptions + name: string + tooltip: string + fn: Function + index: number + fixed: FixedType + key: 'leftFixedActivated' | 'rightFixedActivated' } export type DropdownMixedOption = diff --git a/src/icons/resize_h.svg b/src/icons/resize_h.svg new file mode 100644 index 00000000..f78d5e09 --- /dev/null +++ b/src/icons/resize_h.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx index 2205584b..a5c9afab 100644 --- a/src/views/table/index.tsx +++ b/src/views/table/index.tsx @@ -152,10 +152,12 @@ const TableView = defineComponent({ header: () => (

- 使用响应式方法代理 columns 并且打开 action 则可以启用操作栏 + 使用响应式方法代理 columns 并且打开 action + 则可以启用操作栏(v-model:columns)

拖拽操作栏动态切换表格列

点击左右固定按钮, 即可动态固定列

+

点击修改列宽度, 即可拖动列修改宽度

), default: () => (