表格组件完成

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']
   }
 }

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
+}

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;

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 handleFixedClick = (type: FixedType, idx: number) => {
-      const key = `${type}FiexActivated`
+      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: () => '向左固定',
+                              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: () => '向右固定',
                             }}
                           </NPopover>
+                          {this.FixedPopoverIcon({
+                            element: element,
+                            name: 'right_arrow',
+                            tooltip: '右固定',
+                            fn: this.handleFixedClick,
+                            index,
+                            fixed: 'right',
+                            key: 'rightFixedActivated',
+                          })}
                         </div>
                       ),
                     }}

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 // 向左固定
+  leftFixedActivated?: boolean // 向左固定
-  rightFiexActivated?: 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 =

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>

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: () => (