feat: 优化 GiTable（同步 GiDemo 更新）

src/components/GiTable/index.ts

@@ -0,0 +1,4 @@
+import GiTable from './src/GiTable.vue'
+
+export { GiTable }
+export default GiTable

src/components/GiTable/src/GiTable.vue

@@ -17,18 +17,18 @@
       <a-space wrap class="gi-table__toolbar-right" :size="[8, 8]">
         <slot name="toolbar-right"></slot>
         <a-tooltip content="刷新">
-          <a-button v-if="showRefreshBtn" @click="refresh">
+          <a-button v-if="showRefreshBtn" @click="handleRefresh">
             <template #icon><icon-refresh /></template>
           </a-button>
         </a-tooltip>
-        <a-dropdown v-if="showSizeBtn" @select="handleSelect">
+        <a-dropdown v-if="showSizeBtn" @select="handleSizeChange">
           <a-tooltip content="尺寸">
             <a-button>
               <template #icon><icon-table-size style="width: 14px; height: 14px" /></template>
             </a-button>
           </a-tooltip>
           <template #content>
-            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">
+            <a-doption v-for="item in TABLE_SIZE_OPTIONS" :key="item.value" :value="item.value" :active="item.value === size">
               {{ item.label }}
             </a-doption>
           </template>
@@ -63,7 +63,7 @@
           </template>
         </a-popover>
         <a-tooltip content="全屏">
-          <a-button v-if="showFullscreenBtn" @click="isFullscreen = !isFullscreen">
+          <a-button v-if="showFullscreenBtn" @click="toggleFullscreen">
             <template #icon>
               <icon-fullscreen v-if="!isFullscreen" />
               <icon-fullscreen-exit v-else />
@@ -75,20 +75,21 @@
     <a-row class="gi-table__toolbar-bottom">
       <slot name="toolbar-bottom"></slot>
     </a-row>
-    <div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
+    <div class="gi-table__body" :class="`gi-table__body-pagination-${tableProps['page-position']}`">
       <div class="gi-table__container">
         <a-table
           ref="tableRef"
+          v-bind="tableProps"
           :stripe="stripe"
           :size="size"
-          column-resizable
           :bordered="{ cell: isBordered }"
-          v-bind="{ ...attrs, columns: _columns }"
+          :columns="visibleColumns"
           :scrollbar="true"
           :data="data"
+          column-resizable
         >
-          <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
-            <slot :key="key" :name="key" v-bind="scoped"></slot>
+          <template v-for="key in Object.keys(slots)" :key="key" #[key]="scope">
+            <slot :key="key" :name="key" v-bind="scope" />
           </template>
         </a-table>
       </div>
@@ -97,21 +98,27 @@
 </template>
 
 <script setup lang="ts" generic="T extends TableData">
+import { computed, ref, watch } from 'vue'
 import type { DropdownInstance, TableColumnData, TableData, TableInstance } from '@arco-design/web-vue'
 import { VueDraggable } from 'vue-draggable-plus'
+import { omit } from 'lodash-es'
+import type { TableProps } from './type'
 
-defineOptions({ name: 'GiTable', inheritAttrs: false })
+defineOptions({ name: 'GiTable' })
+
+// Props 默认值
 const props = withDefaults(defineProps<Props>(), {
   title: '',
+  disabledColumnKeys: () => [],
   data: () => [],
-  disabledTools: () => [], // 禁止显示的工具
-  disabledColumnKeys: () => [], // 禁止控制显示隐藏的列
 })
 
+/** Emits 类型定义 */
 const emit = defineEmits<{
   (e: 'refresh'): void
 }>()
 
+/** Slots 类型定义 */
 defineSlots<{
   'th': (props: { column: TableColumnData }) => void
   'thead': () => void
@@ -135,98 +142,127 @@ defineSlots<{
   [propsName: string]: (props: { key: string, record: T, column: TableColumnData, rowIndex: number }) => void
 }>()
 
-const attrs = useAttrs()
-const slots = useSlots()
-
-interface Props {
+/** Props 类型定义 */
+interface Props extends TableProps {
+  /** 表格标题 */
   title?: string
-  data: T[]
-  disabledTools?: string[]
+  /** 禁止控制显示隐藏的列 */
   disabledColumnKeys?: string[]
+  /** 禁止显示的工具 */
+  disabledTools?: string[]
+  /** 表格数据 */
+  data: T[]
 }
 
-const tableRef = ref<TableInstance | null>(null)
+const slots = useSlots()
+
+/** 表格属性计算 */
+const tableProps = computed(() => omit(props, ['title', 'disabledColumnKeys']))
+
+/** 组件状态 */
+const tableRef = useTemplateRef('tableRef')
 const stripe = ref(false)
-const size = ref<TableInstance['size']>('medium')
+const size = ref<TableInstance['size']>('large')
 const isBordered = ref(false)
 const isFullscreen = ref(false)
 
-interface SizeItem { label: string, value: TableInstance['size'] }
-const sizeList: SizeItem[] = [
-  { label: '紧凑', value: 'small' },
-  { label: '默认', value: 'medium' },
-]
+/** 表格尺寸选项 */
+const TABLE_SIZE_OPTIONS = [
+  { label: '迷你', value: 'mini' },
+  { label: '小型', value: 'small' },
+  { label: '中等', value: 'medium' },
+  { label: '大型', value: 'large' },
+] as const
 
-const handleSelect: DropdownInstance['onSelect'] = (value) => {
-  size.value = value as TableInstance['size']
-}
-
-const refresh = () => {
-  emit('refresh')
-}
-
-const showRefreshBtn = computed(() => !props.disabledTools.includes('refresh'))
-const showSizeBtn = computed(() => !props.disabledTools.includes('size'))
-const showFullscreenBtn = computed(() => !props.disabledTools.includes('fullscreen'))
-const showSettingColumnBtn = computed(
-  () => !props.disabledTools.includes('setting') && attrs?.columns && (attrs?.columns as TableColumnData[])?.length,
-)
-interface SettingColumnItem { title: string, key: string, show: boolean, disabled: boolean }
-const settingColumnList = ref<SettingColumnItem[]>([])
-
-// 重置配置列
-const resetSettingColumns = () => {
-  settingColumnList.value = []
-  if (attrs.columns) {
-    const arr = attrs.columns as TableColumnData[]
-    arr.forEach((item) => {
-      settingColumnList.value.push({
-        key: item.dataIndex || (typeof item.title === 'string' ? item.title : ''),
-        title: typeof item.title === 'string' ? item.title : '',
-        show: item.show ?? true,
-        disabled: props.disabledColumnKeys.includes(
-          item.dataIndex || (typeof item.title === 'string' ? item.title : ''),
-        ),
-      })
-    })
+/** 处理表格尺寸变更 */
+const handleSizeChange: DropdownInstance['onSelect'] = (value) => {
+  if (value) {
+    size.value = value as TableInstance['size']
   }
 }
 
+/** 处理表格刷新 */
+const handleRefresh = () => {
+  emit('refresh')
+}
+
+/** 切换全屏状态 */
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+}
+
+const showRefreshBtn = computed(() => !props.disabledTools?.includes('refresh'))
+const showSizeBtn = computed(() => !props.disabledTools?.includes('size'))
+const showFullscreenBtn = computed(() => !props.disabledTools?.includes('fullscreen'))
+/** 列设置相关逻辑 */
+const showSettingColumnBtn = computed(() => {
+  const columns = props.columns as TableColumnData[] | undefined
+  return Boolean(columns?.length)
+})
+
+/** 列设置项类型 */
+interface SettingColumnItem {
+  /** 列标题 */
+  title: string
+  /** 列标识 */
+  key: string
+  /** 是否显示 */
+  show: boolean
+  /** 是否禁用 */
+  disabled: boolean
+}
+
+const settingColumnList = ref<SettingColumnItem[]>([])
+
+/** 重置列设置 */
+const resetSettingColumns = () => {
+  if (!props.columns) {
+    settingColumnList.value = []
+    return
+  }
+
+  const columns = props.columns as TableColumnData[]
+  settingColumnList.value = columns.map((column) => {
+    const key = column.dataIndex || (typeof column.title === 'string' ? column.title : '')
+    return {
+      key,
+      title: typeof column.title === 'string' ? column.title : '',
+      show: column.show ?? true,
+      disabled: props.disabledColumnKeys.includes(key),
+    }
+  })
+}
+
+/** 监听属性变化，重置列设置 */
 watch(
-  () => attrs,
-  () => {
-    resetSettingColumns()
-  },
+  () => props.columns,
+  () => resetSettingColumns(),
   { immediate: true },
 )
 
-// 排序和过滤可显示的列数据
-const _columns = computed(() => {
-  if (!attrs.columns) return []
-  const arr = attrs.columns as TableColumnData[]
-  // 显示的dataIndex
-  const showDataIndexs = settingColumnList.value
-    .filter((i) => i.show)
-    .map((i) => i.key || (typeof i.title === 'string' ? i.title : ''))
-  // 显示的columns数据
-  const filterColumns = arr.filter((i) =>
-    showDataIndexs.includes(i.dataIndex || (typeof i.title === 'string' ? i.title : '')),
+/** 计算显示的列 */
+const visibleColumns = computed(() => {
+  if (!props.columns) return []
+
+  const columns = props.columns as TableColumnData[]
+  const columnMap = new Map(
+    columns.map((col) => [
+      col.dataIndex || (typeof col.title === 'string' ? col.title : ''),
+      col,
+    ]),
   )
-  const sortedColumns: TableColumnData[] = []
-  settingColumnList.value.forEach((i) => {
-    filterColumns.forEach((j) => {
-      if (i.key === (j.dataIndex || j.title)) {
-        sortedColumns.push(j)
-      }
-    })
-  })
-  return sortedColumns
+
+  // 按照设置列表的顺序返回可见列
+  return settingColumnList.value
+    .filter((item) => item.show)
+    .map((item) => columnMap.get(item.key))
+    .filter(Boolean) as TableColumnData[]
 })
 
 defineExpose({ tableRef })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .gi-table {
   flex: 1;
   display: flex;

src/components/GiTable/src/type.ts

@@ -0,0 +1,41 @@
+import type { TableInstance } from '@arco-design/web-vue'
+
+export interface TableProps {
+  columns?: TableInstance['$props']['columns']
+  data?: TableInstance['$props']['data']
+  bordered?: TableInstance['$props']['bordered']
+  hoverable?: TableInstance['$props']['hoverable']
+  stripe?: TableInstance['$props']['stripe']
+  size?: TableInstance['$props']['size']
+  tableLayoutFixed?: TableInstance['$props']['tableLayoutFixed']
+  loading?: TableInstance['$props']['loading']
+  rowSelection?: TableInstance['$props']['rowSelection']
+  expandable?: TableInstance['$props']['expandable']
+  scroll?: TableInstance['$props']['scroll']
+  pagination?: TableInstance['$props']['pagination']
+  pagePosition?: TableInstance['$props']['pagePosition']
+  indentSize?: TableInstance['$props']['indentSize']
+  rowKey?: TableInstance['$props']['rowKey']
+  showHeader?: TableInstance['$props']['showHeader']
+  virtualListProps?: TableInstance['$props']['virtualListProps']
+  spanMethod?: TableInstance['$props']['spanMethod']
+  spanAll?: TableInstance['$props']['spanAll']
+  loadMore?: TableInstance['$props']['loadMore']
+  filterIconAlignLeft?: TableInstance['$props']['filterIconAlignLeft']
+  hideExpandButtonOnEmpty?: TableInstance['$props']['hideExpandButtonOnEmpty']
+  rowClass?: TableInstance['$props']['rowClass']
+  draggable?: TableInstance['$props']['draggable']
+  rowNumber?: TableInstance['$props']['rowNumber']
+  columnResizable?: TableInstance['$props']['columnResizable']
+  summary?: TableInstance['$props']['summary']
+  summaryText?: TableInstance['$props']['summaryText']
+  summarySpanMethod?: TableInstance['$props']['summarySpanMethod']
+  selectedKeys?: TableInstance['$props']['selectedKeys']
+  defaultSelectedKeys?: TableInstance['$props']['defaultSelectedKeys']
+  expandedKeys?: TableInstance['$props']['expandedKeys']
+  defaultExpandedKeys?: TableInstance['$props']['defaultExpandedKeys']
+  defaultExpandAllRows?: TableInstance['$props']['defaultExpandAllRows']
+  stickyHeader?: TableInstance['$props']['stickyHeader']
+  scrollbar?: TableInstance['$props']['scrollbar']
+  showEmptyTree?: TableInstance['$props']['showEmptyTree']
+}

src/components/GiTable/type.ts

@@ -1,5 +0,0 @@
-import type { TableColumnData } from '@arco-design/web-vue'
-
-export interface TableInstanceColumns extends TableColumnData {
-  show?: boolean
-}