表格组件完成

2025-04-05 19:42:07 +08:00 · 2022-12-18 15:50:37 +08:00 · 2022-12-18 15:50:37 +08:00 · 9f40069a53
commit 9f40069a53
parent 73110d5e2a
7 changed files with 125 additions and 38 deletions
--- 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']
  }
 }
--- a/src/components/RayTable/src/components/TableSetting/hook.ts
+++ 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
+}
--- 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;
--- 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 (
+        <NPopover>
+          {{
+            trigger: () => (
+              <RayIcon
+                customClassName={`draggable-item__icon ${
+                  element[key] ? 'draggable-item__icon--actived' : ''
+                }`}
+                name={name}
+                size="18"
+                onClick={fn.bind(this, fixed, index)}
+              />
+            ),
+            default: () => tooltip,
+          }}
+        </NPopover>
+      )
+    }
    /**
     *
     * @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({
                          <NEllipsis>
                            <span>{element.title}</span>
                          </NEllipsis>
+                          {this.FixedPopoverIcon({
+                            element: element,
+                            name: 'left_arrow',
+                            tooltip: '左固定',
+                            fn: this.handleFixedClick,
+                            index,
+                            fixed: 'left',
+                            key: 'leftFixedActivated',
+                          })}
                          <NPopover>
                            {{
                              trigger: () => (
                                <RayIcon
                                  customClassName={`draggable-item__icon ${
-                                    element.leftFiexActivated
+                                    element['resizeColumnActivated']
                                      ? 'draggable-item__icon--actived'
                                      : ''
                                  }`}
-                                  name="left_arrow"
+                                  name="resize_h"
                                  size="18"
-                                  onClick={this.handleFiexClick.bind(
+                                  onClick={this.handleResizeColumnClick.bind(
                                    this,
-                                    'left',
                                    index,
                                  )}
                                />
                              ),
-                              default: () => '向左固定',
-                            }}
-                          </NPopover>
-                          <NPopover>
-                            {{
-                              trigger: () => (
-                                <RayIcon
-                                  customClassName={`draggable-item__icon ${
-                                    element.rightFiexActivated
-                                      ? 'draggable-item__icon--actived'
-                                      : ''
-                                  }`}
-                                  name="right_arrow"
-                                  size="18"
-                                  onClick={this.handleFiexClick.bind(
-                                    this,
-                                    'right',
-                                    index,
-                                  )}
-                                />
-                              ),
-                              default: () => '向右固定',
+                              default: () => '修改列宽',
                            }}
                          </NPopover>
+                          {this.FixedPopoverIcon({
+                            element: element,
+                            name: 'right_arrow',
+                            tooltip: '右固定',
+                            fn: this.handleFixedClick,
+                            index,
+                            fixed: 'right',
+                            key: 'rightFixedActivated',
+                          })}
                        </div>
                      ),
                    }}
--- 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 =
--- a/src/icons/resize_h.svg
+++ b/src/icons/resize_h.svg
@ -0,0 +1,3 @@
+<svg t="1670574790983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24760" width="64" height="64">
+  <path fill='currentColor' d="M844.288 548.827429H179.712l68.717714 68.699428a36.571429 36.571429 0 0 1-51.730285 51.730286l-129.28-129.298286a37.229714 37.229714 0 0 1-0.914286-0.950857A36.48 36.48 0 0 1 54.857143 512.256c0-9.014857 3.254857-17.28 8.667428-23.643429 1.152-1.609143 2.450286-3.126857 3.876572-4.571428l129.298286-129.28a36.571429 36.571429 0 1 1 51.730285 51.712L179.2 475.684571h665.563429l-69.211429-69.211428a36.571429 36.571429 0 1 1 51.730286-51.730286l129.28 129.298286c1.462857 1.444571 2.742857 2.962286 3.894857 4.571428 5.412571 6.363429 8.667429 14.628571 8.667428 23.643429 0 10.569143-4.48 20.077714-11.648 26.752a37.229714 37.229714 0 0 1-0.914285 0.950857l-129.28 129.28a36.571429 36.571429 0 1 1-51.730286-51.712l68.717714-68.699428z" p-id="24761"></path>
+</svg>
--- a/src/views/table/index.tsx
+++ b/src/views/table/index.tsx
@ -152,10 +152,12 @@ const TableView = defineComponent({
            header: () => (
              <div>
                <p>
-                  使用响应式方法代理 columns 并且打开 action 则可以启用操作栏
+                  使用响应式方法代理 columns 并且打开 action
+                  则可以启用操作栏(v-model:columns)
                </p>
                <p>拖拽操作栏动态切换表格列</p>
                <p>点击左右固定按钮, 即可动态固定列</p>
+                <p>点击修改列宽度, 即可拖动列修改宽度</p>
              </div>
            ),
            default: () => (