bw-pro-table 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +223 -80
- package/dist/bw-pro-table.css +1 -1
- package/dist/bw-pro-table.js +1820 -1581
- package/dist/bw-pro-table.umd.cjs +8 -8
- package/dist/types/BwProTable.vue.d.ts +13 -1
- package/dist/types/BwProTableCore.vue.d.ts +28 -5
- package/dist/types/BwProTableSearch.vue.d.ts +20 -19
- package/dist/types/BwProTableToolbar.vue.d.ts +1 -1
- package/dist/types/composables/useSearchComponentMap.d.ts +46 -0
- package/dist/types/composables/useSearchFields.d.ts +25 -0
- package/dist/types/types.d.ts +97 -29
- package/package.json +11 -9
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# BwProTable
|
|
2
2
|
|
|
3
|
-
基于 **ant-design-vue 4**
|
|
3
|
+
基于 **ant-design-vue 4** 的高级业务表格组件（ProTable），提供开箱即用的数据表格体验。采用 Vue 3 Composition API + TypeScript 编写，提供完整的类型推导。
|
|
4
4
|
|
|
5
5
|
## 特性
|
|
6
6
|
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
- 💾 **状态持久化**：列配置、分页、密度、筛选、排序持久化到 `localStorage` / `sessionStorage` / 自定义 `StorageAdapter`，支持版本管理与数据校验
|
|
16
16
|
- ✅ **跨页多选**：跨页保持选中状态，支持全选所有页（DataSource 内存 / Request 回调），最大选择数限制
|
|
17
17
|
- 📎 **Excel 导入导出**：xlsx 按需懒加载，导出 Excel/CSV/选中行，导入预览/自动列映射/校验/模板下载
|
|
18
|
-
- 🔄
|
|
18
|
+
- 🔄 **工具栏**：标题、刷新、密度切换、全屏、列设置、边框/斑马纹切换、清除筛选、选中计数显示
|
|
19
19
|
- 🌐 **国际化**：vue-i18n 集成，`locale` prop 部分覆写，优先级：`props.locale` > `vue-i18n` > `zh-CN` 默认
|
|
20
20
|
- 🎯 **TypeScript 全类型支持**：完整的 Props / Events / Slots / Methods / Composables 类型导出
|
|
21
21
|
|
|
22
22
|
### 已编码但未集成的功能
|
|
23
23
|
|
|
24
|
-
以下功能已在 `composables/`
|
|
24
|
+
以下功能已在 `composables/` 或独立组件中实现对应逻辑，类型定义已就绪，但**尚未在主组件 `BwProTable.vue` 中集成**，运行时不生效。详见 [未集成功能说明](#未集成功能说明) 章节。
|
|
25
25
|
|
|
26
|
-
- 右键菜单（`BwProTableContextMenu.vue`）
|
|
26
|
+
- 右键菜单（`BwProTableContextMenu.vue` + `useContextMenu`）
|
|
27
27
|
- 高级筛选面板（`BwProTableAdvancedFilter.vue`）
|
|
28
28
|
- 视图管理（`useTableView`）
|
|
29
29
|
- 键盘导航（`useBwKeyboard`）
|
|
@@ -55,15 +55,19 @@ npm install bw-pro-table
|
|
|
55
55
|
| `xlsx` | `^0.18.0` | Excel 导入导出功能（按需动态 `import()` 懒加载） |
|
|
56
56
|
| `screenfull` | `^6.0.0` | 工具栏全屏切换功能 |
|
|
57
57
|
|
|
58
|
+
**运行环境**：
|
|
59
|
+
|
|
60
|
+
- Node.js `>=20.19.0`
|
|
61
|
+
|
|
58
62
|
## 快速开始
|
|
59
63
|
|
|
60
64
|
```vue
|
|
61
65
|
<template>
|
|
62
66
|
<BwProTable
|
|
63
|
-
title="用户列表"
|
|
64
67
|
:columns="columns"
|
|
65
68
|
:request="fetchUsers"
|
|
66
69
|
:row-selection="rowSelection"
|
|
70
|
+
:toolbar="{ title: '用户列表', refresh: true, columnSetting: true }"
|
|
67
71
|
/>
|
|
68
72
|
</template>
|
|
69
73
|
|
|
@@ -90,8 +94,8 @@ const columns: ProColumnsType<User> = [
|
|
|
90
94
|
dataIndex: 'status',
|
|
91
95
|
valueType: 'tag',
|
|
92
96
|
valueEnum: {
|
|
93
|
-
active: { text: '启用',
|
|
94
|
-
inactive: { text: '禁用',
|
|
97
|
+
active: { text: '启用', status: 'Success' },
|
|
98
|
+
inactive: { text: '禁用', status: 'Error' },
|
|
95
99
|
},
|
|
96
100
|
},
|
|
97
101
|
{ title: '创建时间', dataIndex: 'createdAt', valueType: 'date' },
|
|
@@ -130,7 +134,6 @@ const rowSelection = {
|
|
|
130
134
|
| `rowKey` | `string \| GetRowKey` | `'id'` | 行唯一标识字段名或函数（函数式 rowKey 时编辑/选择等功能可能受限，建议用字符串） |
|
|
131
135
|
| `tableId` | `string` | 随机生成 | 表格唯一标识，持久化命名空间必需 |
|
|
132
136
|
| `cacheKey` | `string` | - | 持久化缓存键（与 `tableId` 二选一，优先使用 `cacheKey`） |
|
|
133
|
-
| `title` | `string` | - | 表格标题（显示在工具栏） |
|
|
134
137
|
|
|
135
138
|
#### 搜索
|
|
136
139
|
|
|
@@ -139,7 +142,13 @@ const rowSelection = {
|
|
|
139
142
|
| `search` | `boolean \| SearchConfig` | - | 搜索栏配置，`false` 隐藏搜索栏，`true` 全部使用默认值 |
|
|
140
143
|
| `columnSearch` | `false \| HeaderSearchConfig` | - | 列头搜索全局配置，`false` 禁用所有列的 `headerSearch` |
|
|
141
144
|
|
|
142
|
-
> **SearchConfig**：`{ labelWidth?: number; defaultCollapsed?: boolean; resetText?: string; searchText?: string; collapsedCount?: number; colon?: boolean }`
|
|
145
|
+
> **SearchConfig**：`{ labelWidth?: number; defaultCollapsed?: boolean; resetText?: string; searchText?: string; collapsedCount?: number; colon?: boolean; searchFields?: SearchFieldConfig[] }`
|
|
146
|
+
>
|
|
147
|
+
> - `labelWidth`：搜索栏标签宽度，默认 `80`
|
|
148
|
+
> - `defaultCollapsed`：搜索栏默认是否折叠，默认 `false`
|
|
149
|
+
> - `collapsedCount`：折叠时显示的行数，默认 `4`
|
|
150
|
+
> - `colon`：是否显示 label 后的冒号，默认 `true`
|
|
151
|
+
> - `searchFields`：自定义搜索字段列表。未提供时降级为从 columns 自动生成（向后兼容）
|
|
143
152
|
|
|
144
153
|
#### 工具栏
|
|
145
154
|
|
|
@@ -147,7 +156,12 @@ const rowSelection = {
|
|
|
147
156
|
|------|------|--------|------|
|
|
148
157
|
| `toolbar` | `false \| ToolbarConfig` | - | 工具栏配置，`false` 隐藏整个工具栏 |
|
|
149
158
|
|
|
150
|
-
> **ToolbarConfig**：`{ refresh?: boolean; density?: boolean; fullscreen?: boolean; columnSetting?: boolean; export?: boolean \| ExportConfig; clearFilter?: boolean; import?: boolean \| ImportConfig; viewManager?: boolean; bordered?: boolean; striped?: boolean }`
|
|
159
|
+
> **ToolbarConfig**：`{ title?: string; refresh?: boolean; density?: boolean; fullscreen?: boolean; columnSetting?: boolean; export?: boolean \| ExportConfig; clearFilter?: boolean; import?: boolean \| ImportConfig; viewManager?: boolean; bordered?: boolean; striped?: boolean }`
|
|
160
|
+
>
|
|
161
|
+
> - `title`：工具栏左侧标题文本（注意：这是 BwProTable 自己的工具栏标题，非 antd Table 原生的 `title`，后者通过 `$attrs` 透传）
|
|
162
|
+
> - `bordered`：是否显示边框切换开关（默认 `true`）
|
|
163
|
+
> - `striped`：是否显示斑马纹切换开关（默认 `true`）
|
|
164
|
+
> - `viewManager`：视图管理按钮（**类型已定义，运行时未集成**）
|
|
151
165
|
|
|
152
166
|
#### 功能配置
|
|
153
167
|
|
|
@@ -157,12 +171,12 @@ const rowSelection = {
|
|
|
157
171
|
| `dragConfig` | `DragConfig` | - | 拖拽配置（当前仅 `columnDraggable` 生效） |
|
|
158
172
|
| `rowSelection` | `TableRowSelection` | - | 行选择配置（透传 ant-design-vue） |
|
|
159
173
|
| `crossPageSelection` | `false \| CrossPageSelectionConfig` | - | 跨页多选配置，`false` 禁用 |
|
|
160
|
-
| `exportConfig` | `ExportConfig` | - | 导出配置（也可通过 `toolbar.export` 传入） |
|
|
161
|
-
| `importConfig` | `ImportConfig` | - | 导入配置（也可通过 `toolbar.import` 传入） |
|
|
162
174
|
| `contextMenu` | `ContextMenuConfig` | - | 右键菜单配置（**类型已定义，运行时未集成**） |
|
|
163
175
|
| `persistence` | `false \| PersistenceConfig` | - | 持久化配置，`false` 禁用 |
|
|
164
176
|
|
|
165
|
-
|
|
177
|
+
> **注意**：导出/导入配置通过 `toolbar.export` / `toolbar.import` 传入，不存在独立的 `exportConfig` / `importConfig` 顶层 prop。
|
|
178
|
+
|
|
179
|
+
#### 样式与外观
|
|
166
180
|
|
|
167
181
|
| 参数 | 类型 | 默认值 | 说明 |
|
|
168
182
|
|------|------|--------|------|
|
|
@@ -170,15 +184,24 @@ const rowSelection = {
|
|
|
170
184
|
| `bordered` | `boolean` | `false` | 是否显示边框 |
|
|
171
185
|
| `striped` | `boolean` | `false` | 是否显示斑马纹 |
|
|
172
186
|
| `defaultEmptyText` | `string` | `'-'` | 空单元格占位符（`null`/`undefined`/`''` 时显示） |
|
|
173
|
-
| `loading` | `boolean` | - |
|
|
187
|
+
| `loading` | `boolean \| { spinning?: boolean; tip?: string }` | - | 外部加载态（支持 antd SpinProps 对象形式，与内部状态机合并，用户传入值优先） |
|
|
174
188
|
| `pagination` | `false \| TablePaginationConfig` | `{}` | 分页配置，`false` 禁用分页 |
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
|
179
|
-
|
|
180
|
-
| `style` | `CSSProperties` | - | 表格根元素样式 |
|
|
189
|
+
|
|
190
|
+
#### 透传与扩展
|
|
191
|
+
|
|
192
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
193
|
+
|------|------|--------|------|
|
|
181
194
|
| `locale` | `Partial<BwProTableLocale>` | - | 国际化语言包，传入部分字段即可覆写 |
|
|
195
|
+
| `tableLocale` | `Record<string, any>` | - | 透传给 ant-design-vue Table 组件的原生 `locale`（如 Empty 组件文案），优先级高于 `locale` |
|
|
196
|
+
| `expandable` | `ExpandableConfig` | - | 行展开配置（透传 ant-design-vue） |
|
|
197
|
+
| `expandedRowKeys` | `(string \| number)[]` | - | 受控展开行 keys（等价于 `expandable.expandedRowKeys`，二者合并后 `expandable` 内同名属性优先） |
|
|
198
|
+
| `expandedRowRender` | `(props) => VNode` | - | 展开行渲染函数（等价于 `expandable.expandedRowRender`，二者合并后 `expandable` 内同名属性优先） |
|
|
199
|
+
| `rowClassName` | `(record, index) => string` | - | 行 className 函数（与内置斑马纹/选中样式合并） |
|
|
200
|
+
|
|
201
|
+
> **纯透传属性**：以下 ant-design-vue Table 原生属性不单独声明，通过 Vue `$attrs` + `v-bind="$attrs"` 自然流通至底层 `<a-table>`：
|
|
202
|
+
> `scroll`、`sticky`、`customRow`、`customHeaderRow`、`customCell`、`customHeaderCell`、`showHeader`、`indentSize`、`tableLayout`、`defaultExpandAllRows`、`class`、`style` 等。
|
|
203
|
+
>
|
|
204
|
+
> **注意**：`customCell` 的 class 会与内部溢出 class 合并（非替换）；`customHeaderCell` 的事件处理器会与内部拖拽处理器链式调用（非替换）。
|
|
182
205
|
|
|
183
206
|
### Events
|
|
184
207
|
|
|
@@ -237,14 +260,14 @@ const rowSelection = {
|
|
|
237
260
|
|
|
238
261
|
| 插槽名 | 作用域参数 | 说明 |
|
|
239
262
|
|--------|-----------|------|
|
|
240
|
-
| `search` | - |
|
|
241
|
-
| `toolbar` | - |
|
|
242
|
-
| `toolbar-extra` | - |
|
|
243
|
-
| `toolbar-right` | - |
|
|
263
|
+
| `search` | - | 自定义整个搜索栏（替换默认 `BwProTableSearch` 组件） |
|
|
264
|
+
| `toolbar` | - | 自定义整个工具栏（替换默认 `BwProTableToolbar` 组件） |
|
|
265
|
+
| `toolbar-extra` | - | 工具栏左侧额外内容（在标题与内置按钮组之间） |
|
|
266
|
+
| `toolbar-right` | - | 工具栏右侧额外内容（在内置按钮组右侧） |
|
|
244
267
|
| `bodyCell` | `{ column, record, index, text, value }` | 自定义单元格渲染（覆盖 valueType 渲染器） |
|
|
245
268
|
| `headerCell` | `{ column }` | 自定义表头单元格（列头搜索 Popover 仍会追加在右侧） |
|
|
246
269
|
|
|
247
|
-
> **插槽透传机制**：除上述具名插槽外，所有 ant-design-vue Table
|
|
270
|
+
> **插槽透传机制**：除上述具名插槽外，所有 ant-design-vue Table 原生插槽（如 `emptyText`、`title`、`footer` 等）均通过 `v-for="$slots"` 透传支持。
|
|
248
271
|
|
|
249
272
|
## ProColumnType 列定义
|
|
250
273
|
|
|
@@ -253,46 +276,45 @@ const rowSelection = {
|
|
|
253
276
|
```ts
|
|
254
277
|
interface ProColumnType<RecordType = any> extends Omit<TableColumnType<RecordType>, 'children'> {
|
|
255
278
|
// === 值渲染 ===
|
|
256
|
-
valueType?: ValueType;
|
|
257
|
-
valueEnum?: ValueEnumMap;
|
|
258
|
-
dateFormat?: string;
|
|
259
|
-
dateTimeFormat?: string;
|
|
260
|
-
precision?: number;
|
|
261
|
-
currencyPrefix?: string;
|
|
262
|
-
currencySuffix?: string;
|
|
263
|
-
customRender?: RenderFn;
|
|
279
|
+
valueType?: ValueType; // 内置渲染器类型
|
|
280
|
+
valueEnum?: ValueEnumMap; // 枚举值映射（tag/enum 渲染 + 搜索栏 select）
|
|
281
|
+
dateFormat?: string; // 日期格式（valueType='date'，默认 'YYYY-MM-DD'）
|
|
282
|
+
dateTimeFormat?: string; // 日期时间格式（valueType='dateTime'，默认 'YYYY-MM-DD HH:mm:ss'）
|
|
283
|
+
precision?: number; // 小数精度（valueType='number'/'currency'）
|
|
284
|
+
currencyPrefix?: string; // 货币前缀（默认 '¥'）
|
|
285
|
+
currencySuffix?: string; // 货币后缀
|
|
286
|
+
customRender?: RenderFn; // 自定义渲染函数（无 valueType 匹配时回退）
|
|
264
287
|
|
|
265
288
|
// === 空值与溢出 ===
|
|
266
|
-
emptyText?: string;
|
|
289
|
+
emptyText?: string; // 空单元格占位符（覆盖全局 defaultEmptyText）
|
|
267
290
|
overflow?: 'ellipsis' | 'wrap' | 'clip'; // 溢出策略
|
|
268
291
|
|
|
269
292
|
// === 搜索 ===
|
|
270
|
-
|
|
293
|
+
hideInSearch?: boolean; // 是否在搜索栏中隐藏该列（默认 false，即显示在搜索栏）
|
|
271
294
|
headerSearch?: boolean | HeaderSearchConfig; // 列头搜索（仅 valueType='text' 生效）
|
|
272
295
|
renderFormItem?: (context: { model, search, resetField }) => VNode; // 自定义搜索表单控件
|
|
273
|
-
hideInSearch?: boolean; // 是否在搜索栏中隐藏该列（默认 false）
|
|
274
296
|
|
|
275
297
|
// === 编辑 ===
|
|
276
|
-
editable?: boolean | ((record) => boolean);
|
|
277
|
-
formRules?: FormRule[];
|
|
278
|
-
editComponent?: string;
|
|
279
|
-
editComponentProps?: Record<string, any>;
|
|
298
|
+
editable?: boolean | ((record) => boolean); // 是否可编辑
|
|
299
|
+
formRules?: FormRule[]; // 编辑校验规则
|
|
300
|
+
editComponent?: string; // 编辑态组件类型（当前按 valueType 自动匹配）
|
|
301
|
+
editComponentProps?: Record<string, any>; // 编辑态组件额外属性
|
|
280
302
|
|
|
281
303
|
// === 渲染器专属 ===
|
|
282
|
-
actions?: ActionItem[];
|
|
283
|
-
imageWidth?: number;
|
|
284
|
-
imageHeight?: number;
|
|
285
|
-
linkProps?: { href?, target?, onClick? };
|
|
286
|
-
progressProps?: { strokeColor? };
|
|
304
|
+
actions?: ActionItem[]; // 操作列按钮（valueType='action'）
|
|
305
|
+
imageWidth?: number; // 图片宽度（默认 32）
|
|
306
|
+
imageHeight?: number; // 图片高度（默认 32）
|
|
307
|
+
linkProps?: { href?, target?, onClick? }; // 链接配置
|
|
308
|
+
progressProps?: { strokeColor? }; // 进度条配置
|
|
287
309
|
avatarProps?: { srcField?, nameField?, showName?, size?, shape? }; // 头像配置
|
|
288
|
-
booleanSwitch?: boolean;
|
|
310
|
+
booleanSwitch?: boolean; // 布尔列使用 Switch 开关（默认图标）
|
|
289
311
|
|
|
290
312
|
// === 其他 ===
|
|
291
|
-
hidden?: boolean;
|
|
292
|
-
description?: string;
|
|
293
|
-
columnGroup?: string;
|
|
294
|
-
authority?: string | string[];
|
|
295
|
-
children?: ProColumnsType;
|
|
313
|
+
hidden?: boolean; // 是否隐藏列
|
|
314
|
+
description?: string; // 表头说明文字（Tooltip 显示）
|
|
315
|
+
columnGroup?: string; // 列所属分组
|
|
316
|
+
authority?: string | string[]; // 列级权限标识（类型已定义，运行时未集成）
|
|
317
|
+
children?: ProColumnsType; // 子列（分组表头）
|
|
296
318
|
}
|
|
297
319
|
```
|
|
298
320
|
|
|
@@ -301,7 +323,7 @@ interface ProColumnType<RecordType = any> extends Omit<TableColumnType<RecordTyp
|
|
|
301
323
|
```ts
|
|
302
324
|
interface ActionItem<RecordType = any> {
|
|
303
325
|
label: string; // 按钮文字
|
|
304
|
-
type?: 'primary' | 'dashed' | 'link' | 'text' | 'default'; //
|
|
326
|
+
type?: 'primary' | 'dashed' | 'link' | 'text' | 'default'; // 按钮类型
|
|
305
327
|
danger?: boolean; // 危险操作样式
|
|
306
328
|
icon?: string; // @ant-design/icons-vue 图标名
|
|
307
329
|
confirm?: string; // 气泡确认文案（设置后点击先弹 Popconfirm）
|
|
@@ -332,7 +354,7 @@ interface FormRule {
|
|
|
332
354
|
|
|
333
355
|
| valueType | 渲染输出 | 支持的额外列属性 |
|
|
334
356
|
|-----------|----------|------------------|
|
|
335
|
-
| `text` | 文本 + Tooltip（`ellipsis !== false` 时） | `emptyText`、`
|
|
357
|
+
| `text` | 文本 + Tooltip（`ellipsis !== false` 时） | `emptyText`、`overflow` |
|
|
336
358
|
| `number` | 千分位格式化数字 | `precision`、`emptyText` |
|
|
337
359
|
| `date` | dayjs 格式化日期 | `dateFormat`（默认 `'YYYY-MM-DD'`）、`emptyText` |
|
|
338
360
|
| `dateTime` | dayjs 格式化日期时间 | `dateTimeFormat`（默认 `'YYYY-MM-DD HH:mm:ss'`）、`dateFormat`（回退）、`emptyText` |
|
|
@@ -370,10 +392,10 @@ const columns = [
|
|
|
370
392
|
|
|
371
393
|
```ts
|
|
372
394
|
type RendererFn = (ctx: {
|
|
373
|
-
value: any;
|
|
374
|
-
record: any;
|
|
375
|
-
index: number;
|
|
376
|
-
column: ProColumnType;
|
|
395
|
+
value: any; // 单元格值
|
|
396
|
+
record: any; // 行数据
|
|
397
|
+
index: number; // 行索引
|
|
398
|
+
column: ProColumnType; // 列配置
|
|
377
399
|
}) => VNode | string | number;
|
|
378
400
|
```
|
|
379
401
|
|
|
@@ -387,6 +409,7 @@ type RendererFn = (ctx: {
|
|
|
387
409
|
| `hasRenderer(type)` | 判断渲染器是否存在 |
|
|
388
410
|
| `getRendererSafe(type)` | 获取渲染器（自动初始化内置渲染器） |
|
|
389
411
|
| `ensureRenderers()` | 惰性初始化所有内置渲染器（幂等） |
|
|
412
|
+
| `initBuiltinRenderers()` | 同 `ensureRenderers`（保留旧 API 兼容） |
|
|
390
413
|
| `resetRenderers()` | 重置注册表（仅用于测试隔离） |
|
|
391
414
|
|
|
392
415
|
## 数据加载模式
|
|
@@ -426,7 +449,6 @@ const request = async (params: {
|
|
|
426
449
|
|
|
427
450
|
```ts
|
|
428
451
|
const dataSource = ref<User[]>([...]);
|
|
429
|
-
|
|
430
452
|
// 模板
|
|
431
453
|
<BwProTable :columns="columns" :data-source="dataSource" />
|
|
432
454
|
```
|
|
@@ -510,7 +532,7 @@ const dataSource = ref<User[]>([...]);
|
|
|
510
532
|
{ title: '姓名', dataIndex: 'name', valueType: 'text', headerSearch: { placeholder: '搜索姓名' } }
|
|
511
533
|
```
|
|
512
534
|
|
|
513
|
-
**HeaderSearchConfig**：`{ enabled
|
|
535
|
+
**HeaderSearchConfig**：`{ enabled?: boolean; placeholder?: string; searchText?: string; resetText?: string }`
|
|
514
536
|
|
|
515
537
|
全局配置通过 `columnSearch` prop：
|
|
516
538
|
- `columnSearch: false` → 禁用所有列的列头搜索
|
|
@@ -543,7 +565,7 @@ interface EditConfig<RecordType = any> {
|
|
|
543
565
|
| `cell` | `startCellEdit(rowKey, field)` | 仅单个单元格进入编辑态，其他单元格正常显示 |
|
|
544
566
|
| `row` | `startRowEdit(rowKey)` | 整行进入编辑态 |
|
|
545
567
|
|
|
546
|
-
**草稿数据管理**：编辑期间的修改存储在 `draftData: Map<rowKey, Record<field, value
|
|
568
|
+
**草稿数据管理**：编辑期间的修改存储在 `draftData: Map<rowKey, Record<field, value>>`，保存时合并到数据源，取消时回滚到原始数据备份。
|
|
547
569
|
|
|
548
570
|
### 编辑组件自动匹配
|
|
549
571
|
|
|
@@ -811,7 +833,7 @@ interface ExportConfig {
|
|
|
811
833
|
|
|
812
834
|
**导出列处理**：自动排除 `hidden: true` 的列和特殊列（`index`/`action`），表头使用 `columnMapping[dataIndex]` 或 `column.title`。
|
|
813
835
|
|
|
814
|
-
**分片导出**：数据量超过 `chunkSize` 时分片构建 sheet，每 5 片 yield
|
|
836
|
+
**分片导出**：数据量超过 `chunkSize` 时分片构建 sheet，每 5 片 yield 到主线程避免阻塞。
|
|
815
837
|
|
|
816
838
|
### ImportConfig 导入配置
|
|
817
839
|
|
|
@@ -857,6 +879,7 @@ tableRef.value.downloadTemplate(
|
|
|
857
879
|
```vue
|
|
858
880
|
<BwProTable
|
|
859
881
|
:toolbar="{
|
|
882
|
+
title: '用户列表', // 工具栏标题
|
|
860
883
|
refresh: true, // 刷新按钮
|
|
861
884
|
density: true, // 密度切换（small/middle/default）
|
|
862
885
|
fullscreen: true, // 全屏切换
|
|
@@ -870,6 +893,8 @@ tableRef.value.downloadTemplate(
|
|
|
870
893
|
/>
|
|
871
894
|
```
|
|
872
895
|
|
|
896
|
+
> **注意**：`toolbar.title` 是 BwProTable 工具栏自带的标题，与 ant-design-vue Table 原生的 `title` 插槽/属性不同，后者通过 `$attrs` 透传。
|
|
897
|
+
|
|
873
898
|
### 全屏
|
|
874
899
|
|
|
875
900
|
使用 `screenfull` 库实现全屏切换。全屏时动态切换 `getPopupContainer`，确保 Popover/Dropdown 挂载到全屏容器内（通过 `a-config-provider` 实现）。
|
|
@@ -902,7 +927,7 @@ props.locale > vue-i18n 全局消息 > zh-CN 默认值
|
|
|
902
927
|
|
|
903
928
|
**方式二：vue-i18n 集成**
|
|
904
929
|
|
|
905
|
-
|
|
930
|
+
组件通过 `useI18n({ useScope: 'global' })` 读取当前 locale 对应的消息，支持 `^9.0.0 || ^10.0.0 || ^11.0.0` 版本的 vue-i18n。在 vue-i18n 配置中添加对应的消息键即可。
|
|
906
931
|
|
|
907
932
|
**方式三：导入默认中文包**
|
|
908
933
|
|
|
@@ -918,23 +943,25 @@ import { zhCN } from 'bw-pro-table';
|
|
|
918
943
|
|
|
919
944
|
以下 composables 可独立于 `BwProTable` 组件使用（均已从 `index.ts` 导出）：
|
|
920
945
|
|
|
921
|
-
| Composable | 说明 |
|
|
922
|
-
|
|
923
|
-
| `useBwRowEdit` | 行内编辑（草稿/校验/撤销重做/批量编辑） |
|
|
924
|
-
| `useExportExcel` | Excel 导出（xlsx 懒加载/分片/进度） |
|
|
925
|
-
| `useImportExcel` | Excel 导入（解析/映射/校验/预览） |
|
|
926
|
-
| `usePersistence` | 状态持久化（localStorage/sessionStorage/自定义） |
|
|
927
|
-
| `useBwRowSelection` | 行选择管理 |
|
|
928
|
-
| `useQueryParams` | 查询参数管理 |
|
|
929
|
-
| `useColumnHeaderSearch` | 列头搜索状态管理 |
|
|
930
|
-
| `useContextMenu` |
|
|
931
|
-
| `useDragSort` |
|
|
932
|
-
| `useBwKeyboard` |
|
|
933
|
-
| `useTableView` |
|
|
934
|
-
| `useBwPermission` |
|
|
935
|
-
| `useLocale` / `mergeLocale` | 国际化工具 |
|
|
936
|
-
|
|
937
|
-
|
|
946
|
+
| Composable | 说明 | 状态 |
|
|
947
|
+
|------------|------|------|
|
|
948
|
+
| `useBwRowEdit` | 行内编辑（草稿/校验/撤销重做/批量编辑） | ✅ 已集成 |
|
|
949
|
+
| `useExportExcel` | Excel 导出（xlsx 懒加载/分片/进度） | ✅ 已集成 |
|
|
950
|
+
| `useImportExcel` | Excel 导入（解析/映射/校验/预览） | ✅ 已集成 |
|
|
951
|
+
| `usePersistence` | 状态持久化（localStorage/sessionStorage/自定义） | ✅ 已集成 |
|
|
952
|
+
| `useBwRowSelection` | 行选择管理 | ✅ 可独立使用 |
|
|
953
|
+
| `useQueryParams` | URL 查询参数管理 | ✅ 可独立使用 |
|
|
954
|
+
| `useColumnHeaderSearch` | 列头搜索状态管理 | ✅ 已集成 |
|
|
955
|
+
| `useContextMenu` | 右键菜单状态管理 | ⚠️ 未集成 |
|
|
956
|
+
| `useDragSort` | 拖拽排序 | ⚠️ 仅列拖拽集成 |
|
|
957
|
+
| `useBwKeyboard` | 键盘导航 | ⚠️ 未集成 |
|
|
958
|
+
| `useTableView` | 视图管理 | ⚠️ 未集成 |
|
|
959
|
+
| `useBwPermission` | 权限过滤 | ⚠️ 未集成 |
|
|
960
|
+
| `useLocale` / `mergeLocale` | 国际化工具 | ✅ 已集成 |
|
|
961
|
+
|
|
962
|
+
> ✅ 已集成 = 在 `BwProTable.vue` 中直接使用；可独立使用 = composable 已实现且类型导出，但主组件未引用；⚠️ 未集成 = 功能尚未在主组件中挂载。
|
|
963
|
+
|
|
964
|
+
使用示例：
|
|
938
965
|
|
|
939
966
|
```ts
|
|
940
967
|
import { useBwRowEdit, useExportExcel } from 'bw-pro-table';
|
|
@@ -948,9 +975,54 @@ const { editingKeys, startRowEdit, saveEdit, undo, redo } = useBwRowEdit({
|
|
|
948
975
|
});
|
|
949
976
|
```
|
|
950
977
|
|
|
978
|
+
### 完整导出清单
|
|
979
|
+
|
|
980
|
+
```ts
|
|
981
|
+
// 组件
|
|
982
|
+
export { BwProTable } from 'bw-pro-table';
|
|
983
|
+
|
|
984
|
+
// 渲染器
|
|
985
|
+
export {
|
|
986
|
+
defineColumnType, ensureRenderers, getRendererSafe,
|
|
987
|
+
initBuiltinRenderers, resetRenderers,
|
|
988
|
+
} from 'bw-pro-table';
|
|
989
|
+
|
|
990
|
+
// 依赖注入
|
|
991
|
+
export { BW_PRO_TABLE_KEY } from 'bw-pro-table';
|
|
992
|
+
export type { BwProTableContext } from 'bw-pro-table';
|
|
993
|
+
|
|
994
|
+
// Composables
|
|
995
|
+
export {
|
|
996
|
+
useQueryParams, useBwRowEdit, useBwRowSelection,
|
|
997
|
+
useExportExcel, useImportExcel, usePersistence,
|
|
998
|
+
useContextMenu, useDragSort, useBwKeyboard,
|
|
999
|
+
useTableView, useBwPermission, useColumnHeaderSearch,
|
|
1000
|
+
useLocale, mergeLocale, BW_PRO_TABLE_LOCALE_KEY,
|
|
1001
|
+
} from 'bw-pro-table';
|
|
1002
|
+
|
|
1003
|
+
// 类型
|
|
1004
|
+
export type {
|
|
1005
|
+
ProColumnType, ProColumnsType, ValueType,
|
|
1006
|
+
ValueEnumItem, ValueEnumMap, ActionItem, FormRule,
|
|
1007
|
+
GetRowKey, TableRowSelection, ExpandableConfig,
|
|
1008
|
+
BwProTableProps, EditConfig, ContextMenuConfig, ContextMenuItem,
|
|
1009
|
+
DragConfig, ExportConfig, ImportConfig, ViewConfig,
|
|
1010
|
+
TableState, TableStatus, PersistedColumnState, PersistedTableState,
|
|
1011
|
+
StorageAdapter, PersistenceConfig, EditCommand,
|
|
1012
|
+
FilterOperator, AdvancedFilterCondition, AdvancedFilterGroup,
|
|
1013
|
+
RendererFn, RendererContext, BwProTableLocale,
|
|
1014
|
+
} from 'bw-pro-table';
|
|
1015
|
+
|
|
1016
|
+
// 常量
|
|
1017
|
+
export { DEFAULT_EMPTY_TEXT, DEFAULT_PAGE_SIZE, DEFAULT_DATE_FORMAT } from 'bw-pro-table';
|
|
1018
|
+
|
|
1019
|
+
// 国际化
|
|
1020
|
+
export { zhCN } from 'bw-pro-table';
|
|
1021
|
+
```
|
|
1022
|
+
|
|
951
1023
|
## 未集成功能说明
|
|
952
1024
|
|
|
953
|
-
以下功能已在 `composables/` 或独立组件中实现，但**尚未在主组件 `BwProTable.vue` 中集成**，运行时不生效。相关类型定义已就绪，可在 types.ts 中查阅。
|
|
1025
|
+
以下功能已在 `composables/` 或独立组件中实现，但**尚未在主组件 `BwProTable.vue` 中集成**，运行时不生效。相关类型定义已就绪，可在 `types.ts` 中查阅。
|
|
954
1026
|
|
|
955
1027
|
| 功能 | 位置 | 类型定义 | 状态 |
|
|
956
1028
|
|------|------|----------|------|
|
|
@@ -1022,6 +1094,77 @@ const columns = [{ title: '优先级', dataIndex: 'priority', valueType: 'priori
|
|
|
1022
1094
|
|
|
1023
1095
|
> 使用 `bodyCell` 插槽会覆盖 valueType 渲染器的自动匹配。
|
|
1024
1096
|
|
|
1097
|
+
### 跨页多选 + 批量编辑
|
|
1098
|
+
|
|
1099
|
+
```vue
|
|
1100
|
+
<template>
|
|
1101
|
+
<BwProTable
|
|
1102
|
+
ref="tableRef"
|
|
1103
|
+
:columns="columns"
|
|
1104
|
+
:request="fetchUsers"
|
|
1105
|
+
:row-selection="{ type: 'checkbox' }"
|
|
1106
|
+
:cross-page-selection="{
|
|
1107
|
+
enabled: true,
|
|
1108
|
+
maxSelectCount: 100,
|
|
1109
|
+
onSelectAllPages: fetchAllKeys,
|
|
1110
|
+
}"
|
|
1111
|
+
:edit-config="editConfig"
|
|
1112
|
+
>
|
|
1113
|
+
<template #toolbar-right>
|
|
1114
|
+
<a-button @click="tableRef?.openBatchEdit()" :disabled="selectionCount === 0">
|
|
1115
|
+
批量编辑选中项
|
|
1116
|
+
</a-button>
|
|
1117
|
+
</template>
|
|
1118
|
+
</BwProTable>
|
|
1119
|
+
</template>
|
|
1120
|
+
```
|
|
1121
|
+
|
|
1122
|
+
### 自定义持久化存储适配器
|
|
1123
|
+
|
|
1124
|
+
```ts
|
|
1125
|
+
import type { StorageAdapter, PersistedTableState } from 'bw-pro-table';
|
|
1126
|
+
|
|
1127
|
+
const apiAdapter: StorageAdapter = {
|
|
1128
|
+
get: async (key: string) => {
|
|
1129
|
+
const res = await fetch(`/api/table-state/${key}`);
|
|
1130
|
+
return res.ok ? res.json() : null;
|
|
1131
|
+
},
|
|
1132
|
+
set: async (key: string, value: PersistedTableState) => {
|
|
1133
|
+
await fetch(`/api/table-state/${key}`, {
|
|
1134
|
+
method: 'PUT',
|
|
1135
|
+
headers: { 'Content-Type': 'application/json' },
|
|
1136
|
+
body: JSON.stringify(value),
|
|
1137
|
+
});
|
|
1138
|
+
},
|
|
1139
|
+
remove: async (key: string) => {
|
|
1140
|
+
await fetch(`/api/table-state/${key}`, { method: 'DELETE' });
|
|
1141
|
+
},
|
|
1142
|
+
};
|
|
1143
|
+
```
|
|
1144
|
+
|
|
1145
|
+
### 列变换管道（高级）
|
|
1146
|
+
|
|
1147
|
+
理解列的变换顺序有助于自定义 `customCell` / `customHeaderCell` 等高级行为：
|
|
1148
|
+
|
|
1149
|
+
```
|
|
1150
|
+
用户定义的 columns
|
|
1151
|
+
→ Stage 1: BwProTable.vue injectFilteredValue()
|
|
1152
|
+
注入 filterValue/sortOrder/width 覆盖
|
|
1153
|
+
→ Stage 2: BwProTable.vue displayColumns (computed)
|
|
1154
|
+
过滤 hidden 列，按持久化顺序重排
|
|
1155
|
+
→ Stage 3: BwProTableCore.vue wrappedColumns
|
|
1156
|
+
customCell class 合并（非替换），customHeaderCell 事件链式调用
|
|
1157
|
+
→ Stage 4: <a-table> 渲染
|
|
1158
|
+
```
|
|
1159
|
+
|
|
1160
|
+
| 列字段 | 行为说明 |
|
|
1161
|
+
|--------|----------|
|
|
1162
|
+
| `customCell` | class 合并为 `['user-class', 'bw-pro-table-cell-overflow-ellipsis'].join(' ')` |
|
|
1163
|
+
| `customHeaderCell` | 拖拽事件链式调用：用户处理器 → 内部处理器 |
|
|
1164
|
+
| `filteredValue` | **被覆盖**为内部控制值 |
|
|
1165
|
+
| `sortOrder` | **被覆盖**：当前排序列注入排序值，其余列强制 `null` |
|
|
1166
|
+
| `width` | 用户值优先，列宽拖拽覆盖值通过 rAF 批处理注入 |
|
|
1167
|
+
|
|
1025
1168
|
## License
|
|
1026
1169
|
|
|
1027
1170
|
MIT
|
package/dist/bw-pro-table.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.bw-pro-table-column-search[data-v-06f12966]{min-width:200px;padding:8px}.bw-pro-table-column-search .bw-pro-table-column-search-input[data-v-06f12966]{margin-bottom:8px}.bw-pro-table-column-search .bw-pro-table-column-search-actions[data-v-06f12966]{justify-content:flex-end;display:flex}.bw-pro-table-core[data-v-
|
|
1
|
+
.bw-pro-table-column-search[data-v-06f12966]{min-width:200px;padding:8px}.bw-pro-table-column-search .bw-pro-table-column-search-input[data-v-06f12966]{margin-bottom:8px}.bw-pro-table-column-search .bw-pro-table-column-search-actions[data-v-06f12966]{justify-content:flex-end;display:flex}.bw-pro-table-core[data-v-e5d41f2b] .ant-result{padding:48px 0}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-cell-overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-cell-overflow-wrap{white-space:normal;word-break:break-all;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.bw-pro-table-core .bw-pro-table-header-cell[data-v-e5d41f2b]{justify-content:space-between;align-items:center;width:100%;display:flex}.bw-pro-table-core .bw-pro-table-header-left[data-v-e5d41f2b]{text-overflow:ellipsis;align-items:center;gap:4px;min-width:0;display:inline-flex;overflow:hidden}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-header-description-icon{color:var(--ant-color-text-secondary,#00000073);cursor:help;font-size:14px}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-row-selected{background-color:var(--ant-primary-1,#e6f4ff)!important}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-cell-error .ant-input,.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-cell-error .ant-input-number,.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-cell-error .ant-select-selector,.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-cell-error .ant-picker{border-color:var(--ant-color-error,#ff4d4f)!important}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-cell-error-msg{color:var(--ant-color-error,#ff4d4f);margin-top:4px;font-size:12px;line-height:1.5}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-header-drag-source{opacity:.45}.bw-pro-table-core[data-v-e5d41f2b] .bw-pro-table-header-drag-target{box-shadow:inset 2px 0 0 0 var(--ant-primary-color,#1890ff)}.bw-pro-table-core .bw-pro-table-header-drag-icon[data-v-e5d41f2b]{color:var(--ant-color-text-quaternary,#bfbfbf);cursor:grab;flex-shrink:0;font-size:16px;transition:color .2s}.bw-pro-table-core .bw-pro-table-header-drag-icon[data-v-e5d41f2b]:hover{color:var(--ant-primary-color,#1890ff)}.bw-pro-table-core .bw-pro-table-header-drag-icon--active[data-v-e5d41f2b]{color:var(--ant-primary-color,#1890ff);cursor:grabbing}.bw-pro-table-search[data-v-51eef1de]{background:var(--ant-color-bg-container,#fff);border-radius:8px;padding:24px 24px 0}.bw-pro-table-search .bw-search-form[data-v-51eef1de] .ant-form-inline{row-gap:16px}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item{flex-wrap:nowrap!important;flex:0 0 100%!important;margin-bottom:0!important;margin-right:0!important}@media (width>=576px){.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item{flex:0 0 calc(50% - 12px)!important;margin-right:24px!important}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item:nth-child(2n){margin-right:0!important}}@media (width>=768px){.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item{flex:0 0 calc(33.333% - 16px)!important;margin-right:24px!important}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item:nth-child(2n){margin-right:24px!important}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item:nth-child(3n){margin-right:0!important}}@media (width>=992px){.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item{flex:0 0 calc(25% - 18px)!important;margin-right:24px!important}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item:nth-child(3n){margin-right:24px!important}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item:nth-child(4n){margin-right:0!important}}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item .ant-form-item-label{white-space:nowrap;align-items:center;overflow:hidden;flex:0 0 var(--bw-search-label-width,80px)!important;display:flex!important}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item .ant-form-item-label>label{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item .ant-form-item-control{flex-direction:column;min-width:0;flex:1!important;display:flex!important}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item .ant-form-item-control-input,.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item .ant-form-item-control-input-content{width:100%}.bw-pro-table-search [data-bw-search] .ant-form-inline .ant-form-item.bw-search-form-item .ant-form-item-control-input-content>*{box-sizing:border-box;width:100%!important}.bw-pro-table-search .bw-pro-table-search-actions{justify-content:flex-end;padding:16px;display:flex}.bw-pro-table-column-setting-panel[data-v-7e735b2d]{width:280px}.bw-pro-table-column-setting-header[data-v-7e735b2d]{border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;padding:12px 12px 8px;font-weight:600;display:flex}.bw-pro-table-column-setting-body[data-v-7e735b2d]{max-height:50vh;padding:4px 0;overflow-y:auto}.bw-pro-table-column-setting-item[data-v-7e735b2d]{cursor:default;align-items:center;gap:8px;padding:8px 12px;transition:background .15s;display:flex}.bw-pro-table-column-setting-item[data-v-7e735b2d]:hover{background:#fafafa}.bw-pro-table-column-setting-item--dragging[data-v-7e735b2d]{opacity:.45;background:#f0f0f0}.bw-pro-table-column-setting-item--drag-over[data-v-7e735b2d]{box-shadow:inset 0 2px 0 0 var(--ant-primary-color,#1890ff);background:#e6f7ff}.bw-pro-table-column-setting-item .bw-pro-table-column-drag-icon[data-v-7e735b2d]{color:#999;cursor:grab;flex-shrink:0;font-size:16px}.bw-pro-table-column-setting-item .bw-pro-table-column-drag-icon--active[data-v-7e735b2d]{color:var(--ant-primary-color,#1890ff);cursor:grabbing}.bw-pro-table-toolbar[data-v-e832720d]{overflow:auto hidden}.bw-pro-table-toolbar .bw-pro-table-toolbar-container[data-v-e832720d]{justify-content:space-between;align-items:center;height:64px;padding:0 24px;line-height:64px;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-left[data-v-e832720d]{align-items:center;gap:16px;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-right[data-v-e832720d]{align-items:center;gap:8px;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-title[data-v-e832720d]{color:var(--ant-color-text,#000000d9);font-family:PingFangSC-Medium;font-size:16px}.bw-pro-table-toolbar .bw-pro-table-toolbar-selection-alert[data-v-e832720d]{background:var(--ant-primary-1,#e6f4ff);border-bottom:1px solid var(--ant-primary-3,#91caff);justify-content:space-between;align-items:center;padding:8px 24px;font-size:14px;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-selection-alert .bw-pro-table-toolbar-selection-count[data-v-e832720d]{color:var(--ant-color-text,#000000d9)}.bw-pro-table[data-v-a6808263]{background:var(--ant-color-bg-container,#fff);border-radius:8px}.bw-pro-table[data-v-a6808263] .bw-pro-table-row-striped td{background:var(--ant-color-bg-layout,#f5f5f5)!important}.bw-pro-table[data-v-a6808263] .bw-pro-table-row-selected td{background-color:var(--ant-primary-1,#e6f4ff)!important}
|
|
2
2
|
/*$vite$:1*/
|