RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成基础信息页面开发

Browse Source
This commit is contained in:
RISE
2026-03-19 15:55:37 +08:00
parent 8d8a7db748
commit 71357f9621
1768 changed files with 217566 additions and 693615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

593
docs/tableHook使用方式.md
View File

@@ -5,7 +5,6 @@
`useTableColumnControl` 是一个用于统一管理表格列显示/隐藏和排序功能的 Vue 3 Composition API Hook。它封装了列配置的加载、保存、同步等逻辑，让开发者只需几行代码即可实现完整的表格列控制功能。
### 主要功能
- ✅ 列显示/隐藏控制
- ✅ 列排序管理
- ✅ 配置自动保存到本地存储
@@ -18,15 +17,13 @@
## 二、安装和引入
### 文件位置
```
src/hooks/tableColumn.ts
```
### 引入方式
```typescript
import { useTableColumnControl, type TableColumn } from '/@/hooks/tableColumn';
import { useTableColumnControl, type TableColumn } from '/@/hooks/tableColumn'
```
---
@@ -46,96 +43,102 @@ import { useTableColumnControl, type TableColumn } from '/@/hooks/tableColumn';
### 2. 定义表格列配置
```typescript
import { User, Calendar, Phone } from '@element-plus/icons-vue';
import { User, Calendar, Phone } from '@element-plus/icons-vue'
const tableColumns = [
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar },
{ prop: 'phone', label: '电话', icon: Phone },
];
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar },
{ prop: 'phone', label: '电话', icon: Phone }
]
```
### 3. 使用 Hook
```typescript
const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnChange, handleColumnOrderChange } = useTableColumnControl(tableColumns);
const {
visibleColumns,
visibleColumnsSorted,
checkColumnVisible,
handleColumnChange,
handleColumnOrderChange
} = useTableColumnControl(tableColumns)
```
### 4. 在模板中使用
```vue
<template>
<div class="modern-page-container">
<div class="page-wrapper">
<!-- 搜索表单卡片 -->
<el-card v-show="showSearch" class="search-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><Search /></el-icon>
筛选条件
</span>
</div>
</template>
<el-form class="search-form">
<!-- 搜索表单项 -->
</el-form>
</el-card>
<div class="modern-page-container">
<div class="page-wrapper">
<!-- 搜索表单卡片 -->
<el-card v-show="showSearch" class="search-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><Search /></el-icon>
筛选条件
</span>
</div>
</template>
<el-form class="search-form">
<!-- 搜索表单项 -->
</el-form>
</el-card>
<!-- 内容卡片 -->
<el-card class="content-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><Document /></el-icon>
数据列表
</span>
<div class="header-actions">
<!-- TableColumnControl 组件 -->
<TableColumnControl
:columns="tableColumns"
v-model="visibleColumns"
@change="handleColumnChange"
@order-change="handleColumnOrderChange"
/>
</div>
</div>
</template>
<!-- 内容卡片 -->
<el-card class="content-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><Document /></el-icon>
数据列表
</span>
<div class="header-actions">
<!-- TableColumnControl 组件 -->
<TableColumnControl
:columns="tableColumns"
v-model="visibleColumns"
@change="handleColumnChange"
@order-change="handleColumnOrderChange"
/>
</div>
</div>
</template>
<!-- 表格 -->
<el-table :data="dataList" stripe class="modern-table">
<el-table-column type="index" label="序号" width="70">
<template #default="{ $index }">
{{ $index + 1 + ((pagination?.current || 1) - 1) * (pagination?.size || 10) }}
</template>
</el-table-column>
<!-- 表格 -->
<el-table :data="dataList" stripe class="modern-table">
<el-table-column type="index" label="序号" width="70">
<template #default="{ $index }">
{{ $index + 1 + ((pagination?.current || 1) - 1) * (pagination?.size || 10) }}
</template>
</el-table-column>
<!-- 动态渲染列 -->
<template v-for="col in visibleColumnsSorted" :key="col.prop">
<el-table-column
v-if="checkColumnVisible(col.prop || '')"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="col.minWidth"
>
<template #header>
<el-icon v-if="col.icon">
<component :is="col.icon" />
</el-icon>
<span style="margin-left: 4px">{{ col.label }}</span>
</template>
</el-table-column>
</template>
</el-table>
<!-- 动态渲染列 -->
<template v-for="col in visibleColumnsSorted" :key="col.prop">
<el-table-column
v-if="checkColumnVisible(col.prop || '')"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="col.minWidth"
>
<template #header>
<el-icon v-if="col.icon">
<component :is="col.icon" />
</el-icon>
<span style="margin-left: 4px">{{ col.label }}</span>
</template>
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<div class="pagination-wrapper">
<pagination v-bind="pagination" />
</div>
</el-card>
</div>
</div>
<!-- 分页 -->
<div class="pagination-wrapper">
<pagination v-bind="pagination" />
</div>
</el-card>
</div>
</div>
</template>
```
@@ -145,80 +148,86 @@ const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnCh
```vue
<template>
<div>
<right-toolbar>
<TableColumnControl
ref="columnControlRef"
:columns="tableColumns"
v-model="visibleColumns"
trigger-type="default"
trigger-circle
@change="handleColumnChange"
@order-change="handleColumnOrderChange"
>
<template #trigger>
<el-tooltip content="列设置" placement="top">
<el-button circle>
<el-icon><Menu /></el-icon>
</el-button>
</el-tooltip>
</template>
</TableColumnControl>
</right-toolbar>
<div>
<right-toolbar>
<TableColumnControl
ref="columnControlRef"
:columns="tableColumns"
v-model="visibleColumns"
trigger-type="default"
trigger-circle
@change="handleColumnChange"
@order-change="handleColumnOrderChange"
>
<template #trigger>
<el-tooltip content="列设置" placement="top">
<el-button circle>
<el-icon><Menu /></el-icon>
</el-button>
</el-tooltip>
</template>
</TableColumnControl>
</right-toolbar>
<el-table :data="state.dataList" stripe>
<el-table-column type="index" label="序号" width="70">
<template #default="{ $index }">
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
</template>
</el-table-column>
<el-table :data="state.dataList" stripe>
<el-table-column type="index" label="序号" width="70">
<template #default="{ $index }">
{{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
</template>
</el-table-column>
<template v-for="col in visibleColumnsSorted" :key="col.prop">
<el-table-column
v-if="checkColumnVisible(col.prop || '')"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="col.minWidth"
show-overflow-tooltip
>
<template #header>
<el-icon v-if="col.icon">
<component :is="col.icon" />
</el-icon>
<span style="margin-left: 4px">{{ col.label }}</span>
</template>
</el-table-column>
</template>
<template v-for="col in visibleColumnsSorted" :key="col.prop">
<el-table-column
v-if="checkColumnVisible(col.prop || '')"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="col.minWidth"
show-overflow-tooltip
>
<template #header>
<el-icon v-if="col.icon">
<component :is="col.icon" />
</el-icon>
<span style="margin-left: 4px">{{ col.label }}</span>
</template>
</el-table-column>
</template>
<el-table-column label="操作" width="180" fixed="right">
<!-- 操作列内容 -->
</el-table-column>
</el-table>
</div>
<el-table-column label="操作" width="180" fixed="right">
<!-- 操作列内容 -->
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useTableColumnControl } from '/@/hooks/tableColumn';
import { User, Calendar, Phone, Menu } from '@element-plus/icons-vue';
import TableColumnControl from '/@/components/TableColumnControl/index.vue';
import { ref } from 'vue'
import { useTableColumnControl } from '/@/hooks/tableColumn'
import { User, Calendar, Phone, Menu } from '@element-plus/icons-vue'
import TableColumnControl from '/@/components/TableColumnControl/index.vue'
// 定义表格列
const tableColumns = [
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar },
{ prop: 'phone', label: '电话', icon: Phone },
];
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar },
{ prop: 'phone', label: '电话', icon: Phone }
]
// 使用 Hook
const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnChange, handleColumnOrderChange } = useTableColumnControl(tableColumns);
const {
visibleColumns,
visibleColumnsSorted,
checkColumnVisible,
handleColumnChange,
handleColumnOrderChange
} = useTableColumnControl(tableColumns)
const columnControlRef = ref();
const columnControlRef = ref()
const state = ref({
dataList: [],
pagination: { current: 1, size: 10 },
});
dataList: [],
pagination: { current: 1, size: 10 }
})
</script>
```
@@ -230,37 +239,37 @@ const state = ref({
```typescript
interface TableColumn {
prop?: string; // 列属性名
label?: string; // 列标题
icon?: any; // 列图标组件
width?: number | string; // 列宽度
minWidth?: number | string; // 最小宽度
showOverflowTooltip?: boolean; // 是否显示溢出提示
align?: 'left' | 'center' | 'right'; // 对齐方式
alwaysShow?: boolean; // 是否始终显示（不参与列控制）
fixed?: boolean | 'left' | 'right'; // 是否固定列
[key: string]: any; // 其他自定义属性
prop?: string // 列属性名
label?: string // 列标题
icon?: any // 列图标组件
width?: number | string // 列宽度
minWidth?: number | string // 最小宽度
showOverflowTooltip?: boolean // 是否显示溢出提示
align?: 'left' | 'center' | 'right' // 对齐方式
alwaysShow?: boolean // 是否始终显示（不参与列控制）
fixed?: boolean | 'left' | 'right' // 是否固定列
[key: string]: any // 其他自定义属性
}
```
### Hook 返回值
| 属性/方法 | 类型 | 说明 |
| ------------------------- | ---------------------------- | ---------------------- |
| `visibleColumns` | `Ref<string[]>` | 当前可见的列 key 数组 |
| `columnOrder` | `Ref<string[]>` | 列排序顺序数组 |
| `visibleColumnsSorted` | `ComputedRef<TableColumn[]>` | 排序后的可见列配置数组 |
| `checkColumnVisible` | `(prop: string) => boolean` | 检查列是否可见 |
| `handleColumnChange` | `(value: string[]) => void` | 处理列显示变化 |
| `handleColumnOrderChange` | `(order: string[]) => void` | 处理列排序变化 |
| `loadSavedConfig` | `() => void` | 手动加载保存的配置 |
| 属性/方法 | 类型 | 说明 |
|----------|------|------|
| `visibleColumns` | `Ref<string[]>` | 当前可见的列 key 数组 |
| `columnOrder` | `Ref<string[]>` | 列排序顺序数组 |
| `visibleColumnsSorted` | `ComputedRef<TableColumn[]>` | 排序后的可见列配置数组 |
| `checkColumnVisible` | `(prop: string) => boolean` | 检查列是否可见 |
| `handleColumnChange` | `(value: string[]) => void` | 处理列显示变化 |
| `handleColumnOrderChange` | `(order: string[]) => void` | 处理列排序变化 |
| `loadSavedConfig` | `() => void` | 手动加载保存的配置 |
### Hook 选项参数
```typescript
interface Options {
autoLoad?: boolean; // 是否自动加载配置，默认 true
storageKey?: string; // 自定义存储 key，默认使用路由路径
autoLoad?: boolean // 是否自动加载配置，默认 true
storageKey?: string // 自定义存储 key，默认使用路由路径
}
```
@@ -273,12 +282,15 @@ interface Options {
如果不想使用默认的路由路径作为存储 key，可以自定义：
```typescript
const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnChange, handleColumnOrderChange } = useTableColumnControl(
tableColumns,
{
storageKey: 'custom-table-columns-key',
}
);
const {
visibleColumns,
visibleColumnsSorted,
checkColumnVisible,
handleColumnChange,
handleColumnOrderChange
} = useTableColumnControl(tableColumns, {
storageKey: 'custom-table-columns-key'
})
```
### 2. 禁用自动加载
@@ -286,15 +298,21 @@ const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnCh
如果需要在特定时机手动加载配置：
```typescript
const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnChange, handleColumnOrderChange, loadSavedConfig } =
useTableColumnControl(tableColumns, {
autoLoad: false,
});
const {
visibleColumns,
visibleColumnsSorted,
checkColumnVisible,
handleColumnChange,
handleColumnOrderChange,
loadSavedConfig
} = useTableColumnControl(tableColumns, {
autoLoad: false
})
// 在需要的时候手动加载
onMounted(() => {
loadSavedConfig();
});
loadSavedConfig()
})
```
### 3. 固定列和始终显示的列
@@ -303,15 +321,15 @@ onMounted(() => {
```typescript
const tableColumns = [
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar },
{
prop: 'action',
label: '操作',
alwaysShow: true, // 始终显示
fixed: 'right', // 固定在右侧
},
];
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar },
{
prop: 'action',
label: '操作',
alwaysShow: true, // 始终显示
fixed: 'right' // 固定在右侧
}
]
```
### 4. 特殊列模板
@@ -320,19 +338,23 @@ const tableColumns = [
```vue
<template v-for="col in visibleColumnsSorted" :key="col.prop">
<el-table-column v-if="checkColumnVisible(col.prop || '')" :prop="col.prop" :label="col.label">
<!-- 状态列特殊模板 -->
<template v-if="col.prop === 'status'" #default="scope">
<el-tag :type="scope.row.status === '1' ? 'success' : 'warning'">
{{ scope.row.status }}
</el-tag>
</template>
<!-- 其他列默认显示 -->
<template v-else #default="scope">
{{ scope.row[col.prop] }}
</template>
</el-table-column>
<el-table-column
v-if="checkColumnVisible(col.prop || '')"
:prop="col.prop"
:label="col.label"
>
<!-- 状态列特殊模板 -->
<template v-if="col.prop === 'status'" #default="scope">
<el-tag :type="scope.row.status === '1' ? 'success' : 'warning'">
{{ scope.row.status }}
</el-tag>
</template>
<!-- 其他列默认显示 -->
<template v-else #default="scope">
{{ scope.row[col.prop] }}
</template>
</el-table-column>
</template>
```
@@ -347,12 +369,15 @@ const tableColumns = [
```typescript
// ✅ 正确
const tableColumns = [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
];
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' }
]
// ❌ 错误：两个列都没有 prop
const tableColumns = [{ label: '姓名' }, { label: '年龄' }];
const tableColumns = [
{ label: '姓名' },
{ label: '年龄' }
]
```
### 2. 响应式更新
@@ -361,12 +386,12 @@ const tableColumns = [{ label: '姓名' }, { label: '年龄' }];
```typescript
const tableColumns = ref([
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
]);
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' }
])
// 动态添加列
tableColumns.value.push({ prop: 'phone', label: '电话' });
tableColumns.value.push({ prop: 'phone', label: '电话' })
```
### 3. 配置存储位置
@@ -380,15 +405,12 @@ tableColumns.value.push({ prop: 'phone', label: '电话' });
Hook 默认在组件挂载时自动加载配置。如果需要在数据加载后重新加载：
```typescript
const { loadSavedConfig } = useTableColumnControl(tableColumns);
const { loadSavedConfig } = useTableColumnControl(tableColumns)
watch(
() => someData.value,
() => {
// 数据变化后重新加载配置
loadSavedConfig();
}
);
watch(() => someData.value, () => {
// 数据变化后重新加载配置
loadSavedConfig()
})
```
---
@@ -402,23 +424,23 @@ watch(
```typescript
// 扩展 Hook
function useTableColumnControlWithWidth(tableColumns: TableColumn[]) {
const baseHook = useTableColumnControl(tableColumns);
const columnWidths = ref<Record<string, number>>({});
const baseHook = useTableColumnControl(tableColumns)
const columnWidths = ref<Record<string, number>>({})
const handleColumnWidthChange = (prop: string, width: number) => {
columnWidths.value[prop] = width;
// 保存到本地存储
const storageKey = getStorageKey();
const config = getTableConfigFromLocal(storageKey) || {};
config.columnWidths = columnWidths.value;
saveTableConfigToLocal(storageKey, config);
};
const handleColumnWidthChange = (prop: string, width: number) => {
columnWidths.value[prop] = width
// 保存到本地存储
const storageKey = getStorageKey()
const config = getTableConfigFromLocal(storageKey) || {}
config.columnWidths = columnWidths.value
saveTableConfigToLocal(storageKey, config)
}
return {
...baseHook,
columnWidths,
handleColumnWidthChange,
};
return {
...baseHook,
columnWidths,
handleColumnWidthChange
}
}
```
@@ -428,24 +450,24 @@ function useTableColumnControlWithWidth(tableColumns: TableColumn[]) {
```typescript
function useTableColumnControlWithFixed(tableColumns: TableColumn[]) {
const baseHook = useTableColumnControl(tableColumns);
const fixedColumns = ref<string[]>([]);
const baseHook = useTableColumnControl(tableColumns)
const fixedColumns = ref<string[]>([])
const toggleColumnFixed = (prop: string) => {
const index = fixedColumns.value.indexOf(prop);
if (index > -1) {
fixedColumns.value.splice(index, 1);
} else {
fixedColumns.value.push(prop);
}
// 保存配置
};
const toggleColumnFixed = (prop: string) => {
const index = fixedColumns.value.indexOf(prop)
if (index > -1) {
fixedColumns.value.splice(index, 1)
} else {
fixedColumns.value.push(prop)
}
// 保存配置
}
return {
...baseHook,
fixedColumns,
toggleColumnFixed,
};
return {
...baseHook,
fixedColumns,
toggleColumnFixed
}
}
```
@@ -454,17 +476,22 @@ function useTableColumnControlWithFixed(tableColumns: TableColumn[]) {
如果需要按分组管理列：
```typescript
function useTableColumnControlWithGroup(tableColumns: TableColumn[], groups: Record<string, string[]>) {
const baseHook = useTableColumnControl(tableColumns);
function useTableColumnControlWithGroup(
tableColumns: TableColumn[],
groups: Record<string, string[]>
) {
const baseHook = useTableColumnControl(tableColumns)
const getColumnsByGroup = (groupName: string) => {
return tableColumns.filter(col =>
groups[groupName]?.includes(col.prop || '')
)
}
const getColumnsByGroup = (groupName: string) => {
return tableColumns.filter((col) => groups[groupName]?.includes(col.prop || ''));
};
return {
...baseHook,
getColumnsByGroup,
};
return {
...baseHook,
getColumnsByGroup
}
}
```
@@ -474,13 +501,13 @@ function useTableColumnControlWithGroup(tableColumns: TableColumn[], groups: Rec
```typescript
function useTableColumnControlWithCustomStorage(
tableColumns: TableColumn[],
storageAdapter: {
get: (key: string) => Promise<any>;
set: (key: string, value: any) => Promise<void>;
}
tableColumns: TableColumn[],
storageAdapter: {
get: (key: string) => Promise<any>
set: (key: string, value: any) => Promise<void>
}
) {
// 实现自定义存储逻辑
// 实现自定义存储逻辑
}
```
@@ -491,7 +518,6 @@ function useTableColumnControlWithCustomStorage(
### Q1: 为什么配置没有保存？
**A:** 检查以下几点：
1. 确保 `handleColumnChange` 和 `handleColumnOrderChange` 已正确绑定到组件
2. 检查浏览器控制台是否有错误
3. 确认 API 调用是否成功（检查网络请求）
@@ -512,11 +538,11 @@ function useTableColumnControlWithCustomStorage(
```typescript
// 清除本地存储
localStorage.removeItem('user-table-configs-all');
localStorage.removeItem('user-table-configs-all')
// 或通过 API 删除
import { deleteUserTableConfig } from '/@/api/admin/usertable';
deleteUserTableConfig(storageKey);
import { deleteUserTableConfig } from '/@/api/admin/usertable'
deleteUserTableConfig(storageKey)
```
### Q4: 如何在多个页面共享列配置？
@@ -525,8 +551,8 @@ deleteUserTableConfig(storageKey);
```typescript
const { visibleColumns } = useTableColumnControl(tableColumns, {
storageKey: 'shared-table-columns',
});
storageKey: 'shared-table-columns'
})
```
---
@@ -539,12 +565,12 @@ const { visibleColumns } = useTableColumnControl(tableColumns, {
```typescript
// src/views/xxx/columns.ts
import { User, Calendar } from '@element-plus/icons-vue';
import { User, Calendar } from '@element-plus/icons-vue'
export const tableColumns = [
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar },
];
{ prop: 'name', label: '姓名', icon: User },
{ prop: 'age', label: '年龄', icon: Calendar }
]
```
### 2. 类型定义
@@ -552,9 +578,11 @@ export const tableColumns = [
为列配置添加类型约束：
```typescript
import type { TableColumn } from '/@/hooks/tableColumn';
import type { TableColumn } from '/@/hooks/tableColumn'
const tableColumns: TableColumn[] = [{ prop: 'name', label: '姓名', icon: User }];
const tableColumns: TableColumn[] = [
{ prop: 'name', label: '姓名', icon: User }
]
```
### 3. 统一命名
@@ -572,25 +600,25 @@ const tableColumns: TableColumn[] = [{ prop: 'name', label: '姓名', icon: User
### 从旧实现迁移到 Hook
**旧代码（~90 行）：**
```typescript
const visibleColumns = ref<string[]>([]);
const columnOrder = ref<string[]>([]);
const loadSavedConfig = () => {
/* ... */
};
const handleColumnChange = () => {
/* ... */
};
const visibleColumns = ref<string[]>([])
const columnOrder = ref<string[]>([])
const loadSavedConfig = () => { /* ... */ }
const handleColumnChange = () => { /* ... */ }
// ... 更多代码
```
**新代码（~5 行）：**
```typescript
import { useTableColumnControl } from '/@/hooks/tableColumn';
import { useTableColumnControl } from '/@/hooks/tableColumn'
const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnChange, handleColumnOrderChange } = useTableColumnControl(tableColumns);
const {
visibleColumns,
visibleColumnsSorted,
checkColumnVisible,
handleColumnChange,
handleColumnOrderChange
} = useTableColumnControl(tableColumns)
```
### 迁移步骤
@@ -605,7 +633,6 @@ const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnCh
## 十二、更新日志
### v1.0.0 (2024-01-XX)
- ✅ 初始版本发布
- ✅ 支持列显示/隐藏控制
- ✅ 支持列排序管理
@@ -626,7 +653,6 @@ const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnCh
## 十四、贡献指南
如果发现 bug 或有改进建议，请：
1. 提交 Issue 描述问题
2. 提交 Pull Request 提供修复方案
3. 更新本文档说明变更
@@ -634,3 +660,4 @@ const { visibleColumns, visibleColumnsSorted, checkColumnVisible, handleColumnCh
---
**最后更新：2024-01-XX**