@yidun/antd-super-table 0.0.7 → 0.0.8
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 +163 -181
- package/dist/example/formItems.d.ts +325 -0
- package/dist/example/main.d.ts +1 -0
- package/dist/example/tableColumns.d.ts +1116 -0
- package/dist/index.js +1962 -1699
- package/dist/{index.d.ts → src/index.d.ts} +4 -0
- package/dist/src/typings.d.ts +358 -0
- package/dist/{utils → src/utils}/index.d.ts +8 -5
- package/dist/typings.ts +193 -80
- package/package.json +3 -2
- package/dist/typings.d.ts +0 -233
- /package/dist/{components → src/components}/VNodes.d.ts +0 -0
- /package/dist/{config.d.ts → src/config.d.ts} +0 -0
- /package/dist/{utils → src/utils}/dialogManager.d.ts +0 -0
- /package/dist/{utils → src/utils}/service.d.ts +0 -0
- /package/dist/{utils → src/utils}/useDialog.d.ts +0 -0
package/README.md
CHANGED
|
@@ -1,30 +1,25 @@
|
|
|
1
1
|
# Antd Super Table 组件
|
|
2
|
-
|
|
3
2
|
## 介绍
|
|
4
|
-
|
|
5
3
|
Antd Super Table 是一个基于 Ant Design Vue 的高级表格组件，提供了丰富的功能特性：
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
+ 🔍 灵活的查询条件配置
|
|
6
|
+
+ 📊 强大的表格列配置
|
|
7
|
+
+ 🎯 场景管理功能
|
|
8
|
+
+ ⚡️ 高性能渲染
|
|
9
|
+
+ 🛠 可定制的表格配置
|
|
10
|
+
+ 🔄 表格拖拽排序
|
|
11
|
+
+ 📱 响应式设计
|
|
12
|
+
+ 🎨 主题定制
|
|
15
13
|
|
|
16
14
|
## 示例
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
|
|
19
16
|
|
|
20
17
|
## 安装
|
|
21
|
-
|
|
22
18
|
```bash
|
|
23
19
|
npm install @yidun/antd-super-table
|
|
24
20
|
```
|
|
25
21
|
|
|
26
22
|
## 基础用法
|
|
27
|
-
|
|
28
23
|
```vue
|
|
29
24
|
<template>
|
|
30
25
|
<SuperTable :form-items="formItems" :columns="columns" :request="onRequest" scene-type="user-list" />
|
|
@@ -93,33 +88,32 @@ const onRequest = async (options: { params: Record<string, any>; pageSize: numbe
|
|
|
93
88
|
}
|
|
94
89
|
}
|
|
95
90
|
</script>
|
|
91
|
+
|
|
96
92
|
```
|
|
97
93
|
|
|
98
94
|
## 查询场景配置
|
|
99
|
-
|
|
100
95
|
默认启用场景，场景相关的配置存储在localStorage中
|
|
101
96
|
|
|
102
|
-
| 属性名
|
|
103
|
-
|
|
|
104
|
-
| sceneType
|
|
105
|
-
| enableScene
|
|
106
|
-
| sceneStorageType | string
|
|
107
|
-
| sceneRequest
|
|
108
|
-
| defaultScene
|
|
109
|
-
| maxSceneCount
|
|
97
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
98
|
+
| --- | --- | --- | --- |
|
|
99
|
+
| sceneType | string | '' | 场景对应的标识 |
|
|
100
|
+
| enableScene | boolean | `true` | 是否启用场景管理 |
|
|
101
|
+
| sceneStorageType | string | `local` | 场景存储位置，可选 `local` 或 `api` |
|
|
102
|
+
| sceneRequest | object | - | 场景请求函数配置（API模式时必填） |
|
|
103
|
+
| defaultScene | object/array | | 默认场景配置 |
|
|
104
|
+
| maxSceneCount | number | `100` | 最大场景数量 |
|
|
110
105
|
|
|
111
|
-
### 场景存储配置
|
|
112
106
|
|
|
107
|
+
### 场景存储配置
|
|
113
108
|
#### 本地存储模式（默认）
|
|
114
|
-
|
|
115
109
|
```vue
|
|
116
110
|
<template>
|
|
117
111
|
<SuperTable :form-items="formItems" :columns="columns" :request="onRequest" scene-storage-type="local" enable-scene />
|
|
118
112
|
</template>
|
|
113
|
+
|
|
119
114
|
```
|
|
120
115
|
|
|
121
116
|
#### API存储模式
|
|
122
|
-
|
|
123
117
|
```vue
|
|
124
118
|
<template>
|
|
125
119
|
<SuperTable
|
|
@@ -176,10 +170,10 @@ const sceneRequest = {
|
|
|
176
170
|
}
|
|
177
171
|
}
|
|
178
172
|
</script>
|
|
173
|
+
|
|
179
174
|
```
|
|
180
175
|
|
|
181
176
|
#### 错误处理
|
|
182
|
-
|
|
183
177
|
当 `sceneStorageType` 为 `'api'` 但没有提供 `sceneRequest` 时，组件会在控制台输出错误信息并禁用场景功能：
|
|
184
178
|
|
|
185
179
|
```javascript
|
|
@@ -188,40 +182,37 @@ SuperTable: sceneStorageType 为 "api" 时，必须提供 sceneRequest 配置
|
|
|
188
182
|
```
|
|
189
183
|
|
|
190
184
|
## 查询条件配置
|
|
191
|
-
|
|
192
185
|
### 支持的输入类型
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
- 自定义组件 (component)
|
|
186
|
+
+ 文本输入框 (input)
|
|
187
|
+
+ 组合输入框 (inputGroup)
|
|
188
|
+
+ 数字输入框 (inputNumber)
|
|
189
|
+
+ 数字范围输入框 (inputNumberRange)
|
|
190
|
+
+ 选择器 (select)
|
|
191
|
+
+ 日期选择器 (datePicker)
|
|
192
|
+
+ 日期范围选择器 (rangePicker)
|
|
193
|
+
+ 级联选择 (cascader)
|
|
194
|
+
+ 树形选择 (treeSelect)
|
|
195
|
+
+ 自定义组件 (component)
|
|
204
196
|
|
|
205
197
|
### 查询条件属性
|
|
198
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
199
|
+
| --- | --- | --- | --- |
|
|
200
|
+
| type | string | - | 查询条件类型 |
|
|
201
|
+
| name | string | - | 字段名称 |
|
|
202
|
+
| label | string | - | 显示标签 |
|
|
203
|
+
| value | any | - | 默认值 |
|
|
204
|
+
| props | object | {} | 传递给组件的属性 |
|
|
205
|
+
| component | Component | - | 自定义组件（type为component时必填） |
|
|
206
|
+
| modelPropName | string | 'value' | 自定义组件的v-model属性名 |
|
|
207
|
+
| span | number | 1 | 列宽系数 |
|
|
208
|
+
| visible | boolean | true | 是否显示 |
|
|
209
|
+
| fixed | boolean | false | 是否固定（不可删除） |
|
|
210
|
+
| selected | boolean | false | 是否默认选中 |
|
|
211
|
+
| quiet | boolean | false | 是否静默更新（不触发搜索） |
|
|
212
|
+
| showLabel | boolean | true | 是否显示标签 |
|
|
206
213
|
|
|
207
|
-
| 属性名 | 类型 | 默认值 | 说明 |
|
|
208
|
-
| ------------- | --------- | ------- | ----------------------------------- |
|
|
209
|
-
| type | string | - | 查询条件类型 |
|
|
210
|
-
| name | string | - | 字段名称 |
|
|
211
|
-
| label | string | - | 显示标签 |
|
|
212
|
-
| value | any | - | 默认值 |
|
|
213
|
-
| props | object | {} | 传递给组件的属性 |
|
|
214
|
-
| component | Component | - | 自定义组件（type为component时必填） |
|
|
215
|
-
| modelPropName | string | 'value' | 自定义组件的v-model属性名 |
|
|
216
|
-
| span | number | 1 | 列宽系数 |
|
|
217
|
-
| visible | boolean | true | 是否显示 |
|
|
218
|
-
| fixed | boolean | false | 是否固定（不可删除） |
|
|
219
|
-
| selected | boolean | false | 是否默认选中 |
|
|
220
|
-
| quiet | boolean | false | 是否静默更新（不触发搜索） |
|
|
221
|
-
| showLabel | boolean | true | 是否显示标签 |
|
|
222
214
|
|
|
223
215
|
### 完整示例
|
|
224
|
-
|
|
225
216
|
```typescript
|
|
226
217
|
import dayjs from 'dayjs'
|
|
227
218
|
import { Switch } from 'ant-design-vue'
|
|
@@ -399,39 +390,36 @@ export const createFormItems = () => {
|
|
|
399
390
|
```
|
|
400
391
|
|
|
401
392
|
## 表格列配置
|
|
402
|
-
|
|
403
393
|
### 支持的列类型
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
- 排序 (sort)
|
|
394
|
+
+ 文本 (text)
|
|
395
|
+
+ 图片 (image)
|
|
396
|
+
+ 标签 (tag)
|
|
397
|
+
+ 按钮 (button)
|
|
398
|
+
+ 链接 (link)
|
|
399
|
+
+ 自定义 (component)
|
|
400
|
+
+ 排序 (sort)
|
|
412
401
|
|
|
413
402
|
内置解析类型，均支持在一个单元格内展示多个节点，超出最大个数后会展示更多按钮，点击更多按钮可展开查看所有数据，所以可以扩展出文本列表、图片列表、按钮列表、标签列表等展示形式
|
|
414
403
|
|
|
415
404
|
### 表格列属性
|
|
405
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
406
|
+
| --- | --- | --- | --- |
|
|
407
|
+
| key | string | - | 列的唯一标识 |
|
|
408
|
+
| title | string | - | 列标题 |
|
|
409
|
+
| type | string/function | 'text' | 列类型 |
|
|
410
|
+
| content | string/function | - | 列内容 |
|
|
411
|
+
| titleTooltip | string/function | - | 标题提示信息 |
|
|
412
|
+
| tooltip | string/boolean/function | - | 内容提示信息 |
|
|
413
|
+
| component | Component | - | 自定义组件（type为component时必填） |
|
|
414
|
+
| props | object/function | {} | 传递给组件的属性 |
|
|
415
|
+
| width | number | 120 | 列宽度 |
|
|
416
|
+
| visible | boolean | true | 是否可见 |
|
|
417
|
+
| fixed | string | - | 固定列位置，可选 'left' 或 'right' |
|
|
418
|
+
| copyable | boolean | false | 是否可复制 |
|
|
419
|
+
| ellipsis | boolean | true | 是否超出显示省略号 |
|
|
416
420
|
|
|
417
|
-
| 属性名 | 类型 | 默认值 | 说明 |
|
|
418
|
-
| ------------ | ----------------------- | ------ | ----------------------------------- |
|
|
419
|
-
| key | string | - | 列的唯一标识 |
|
|
420
|
-
| title | string | - | 列标题 |
|
|
421
|
-
| type | string/function | 'text' | 列类型 |
|
|
422
|
-
| content | string/function | - | 列内容 |
|
|
423
|
-
| titleTooltip | string/function | - | 标题提示信息 |
|
|
424
|
-
| tooltip | string/boolean/function | - | 内容提示信息 |
|
|
425
|
-
| component | Component | - | 自定义组件（type为component时必填） |
|
|
426
|
-
| props | object/function | {} | 传递给组件的属性 |
|
|
427
|
-
| width | number | 120 | 列宽度 |
|
|
428
|
-
| visible | boolean | true | 是否可见 |
|
|
429
|
-
| fixed | string | - | 固定列位置，可选 'left' 或 'right' |
|
|
430
|
-
| copyable | boolean | false | 是否可复制 |
|
|
431
|
-
| ellipsis | boolean | true | 是否超出显示省略号 |
|
|
432
421
|
|
|
433
422
|
### 完整示例
|
|
434
|
-
|
|
435
423
|
```typescript
|
|
436
424
|
import { Input } from 'ant-design-vue'
|
|
437
425
|
|
|
@@ -575,9 +563,7 @@ export const createTableColumns = (options: { onDelete: (record: Record<string,
|
|
|
575
563
|
```
|
|
576
564
|
|
|
577
565
|
## 高级功能
|
|
578
|
-
|
|
579
566
|
### 表格拖拽排序
|
|
580
|
-
|
|
581
567
|
```vue
|
|
582
568
|
<template>
|
|
583
569
|
<SuperTable
|
|
@@ -595,18 +581,18 @@ const onRowSortEnd = newData => {
|
|
|
595
581
|
// 处理排序后的数据
|
|
596
582
|
}
|
|
597
583
|
</script>
|
|
584
|
+
|
|
598
585
|
```
|
|
599
586
|
|
|
600
587
|
### 表格配置
|
|
601
|
-
|
|
602
588
|
```vue
|
|
603
589
|
<template>
|
|
604
590
|
<SuperTable :form-items="formItems" :columns="columns" :request="onRequest" :enable-table-config="true" />
|
|
605
591
|
</template>
|
|
592
|
+
|
|
606
593
|
```
|
|
607
594
|
|
|
608
595
|
### 自定义查询参数
|
|
609
|
-
|
|
610
596
|
```vue
|
|
611
597
|
<template>
|
|
612
598
|
<SuperTable
|
|
@@ -616,100 +602,104 @@ const onRowSortEnd = newData => {
|
|
|
616
602
|
:custom-query-params="{ status: 1, type: 'active' }"
|
|
617
603
|
/>
|
|
618
604
|
</template>
|
|
605
|
+
|
|
619
606
|
```
|
|
620
607
|
|
|
621
608
|
### 插槽使用
|
|
622
|
-
|
|
623
609
|
```vue
|
|
624
610
|
<template>
|
|
625
611
|
<SuperTable :form-items="formItems" :columns="columns" :request="onRequest">
|
|
626
612
|
<!-- 场景选择器前的内容 -->
|
|
627
613
|
<template #sceneAddonBefore>
|
|
628
614
|
<a-button type="primary">自定义按钮</a-button>
|
|
615
|
+
|
|
629
616
|
</template>
|
|
630
617
|
|
|
631
618
|
<!-- 场景选择器后的内容 -->
|
|
632
619
|
<template #sceneAddonAfter>
|
|
633
620
|
<a-button>导出</a-button>
|
|
621
|
+
|
|
634
622
|
</template>
|
|
635
623
|
|
|
636
624
|
<!-- 表格头部 -->
|
|
637
625
|
<template #tableHead>
|
|
638
626
|
<h3>用户列表</h3>
|
|
627
|
+
|
|
639
628
|
</template>
|
|
640
629
|
|
|
641
630
|
<!-- 工具栏 -->
|
|
642
631
|
<template #toolBar>
|
|
643
632
|
<a-button type="primary">新增用户</a-button>
|
|
633
|
+
|
|
644
634
|
</template>
|
|
645
635
|
|
|
646
636
|
<!-- 表格底部 -->
|
|
647
637
|
<template #tableFoot>
|
|
648
638
|
<div>总计: {{ total }} 条数据</div>
|
|
639
|
+
|
|
649
640
|
</template>
|
|
650
641
|
|
|
651
642
|
<!-- 展开行 -->
|
|
652
643
|
<template #expandedRowRender="{ record }">
|
|
653
644
|
<p>详细信息: {{ record.description }}</p>
|
|
645
|
+
|
|
654
646
|
</template>
|
|
647
|
+
|
|
655
648
|
</SuperTable>
|
|
649
|
+
|
|
656
650
|
</template>
|
|
651
|
+
|
|
657
652
|
```
|
|
658
653
|
|
|
659
654
|
## API
|
|
660
|
-
|
|
661
655
|
### Props
|
|
662
|
-
|
|
663
|
-
|
|
|
664
|
-
|
|
|
665
|
-
|
|
|
666
|
-
|
|
|
667
|
-
|
|
|
668
|
-
|
|
|
669
|
-
|
|
|
670
|
-
|
|
|
671
|
-
|
|
|
672
|
-
|
|
|
673
|
-
|
|
|
674
|
-
|
|
|
675
|
-
|
|
|
676
|
-
|
|
|
677
|
-
|
|
|
678
|
-
|
|
|
679
|
-
|
|
|
680
|
-
|
|
|
681
|
-
|
|
|
682
|
-
|
|
|
683
|
-
| enableTableConfig | 开启表格设置 | `boolean` | `true` |
|
|
656
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
657
|
+
| ----------------- | ---------------- | ----------------------------- | ------------------------------- | --------- |
|
|
658
|
+
| formItems | 查询条件配置 | `SuperTableFormItem[]` | `[]` |
|
|
659
|
+
| columns | 表格列配置 | `SuperTableColumn[]` | `[]` |
|
|
660
|
+
| request | 数据请求函数 | `SuperTableRequestFunction` | - |
|
|
661
|
+
| sceneType | 场景类型 | `string` | `''` |
|
|
662
|
+
| enableScene | 是否启用场景管理 | `boolean` | `true` |
|
|
663
|
+
| sceneStorageType | 场景存储位置 | `'local' | 'api'` | `'local'` |
|
|
664
|
+
| sceneRequest | 场景请求函数配置 | `SceneRequestConfig` | - |
|
|
665
|
+
| defaultScene | 默认场景配置 | `SuperTableDefaultSceneConfig | SuperTableDefaultSceneConfig[]` | - |
|
|
666
|
+
| maxSceneCount | 最大场景数量 | `number` | `100` |
|
|
667
|
+
| formItemColSpan | 查询条件列数 | `number` | `6` |
|
|
668
|
+
| debounceWait | 查询防抖时间(ms) | `number` | `100` |
|
|
669
|
+
| refreshDeps | 依赖刷新选项 | `any[]` | `[]` |
|
|
670
|
+
| tableProps | 表格属性 | `TableProps` | `{}` |
|
|
671
|
+
| formatDataSource | 转换表格数据 | `(data: any[]) => any[]` | `(data) => data` |
|
|
672
|
+
| sortable | 是否可排序 | `boolean` | `false` |
|
|
673
|
+
| wrapperStyle | 容器样式 | `object` | `{}` |
|
|
674
|
+
| customQueryParams | 默认查询条件 | `object` | `{}` |
|
|
675
|
+
| showRefreshButton | 展示刷新按钮 | `boolean` | `false` |
|
|
676
|
+
| enableTableConfig | 开启表格设置 | `boolean` | `true` |
|
|
684
677
|
|
|
685
678
|
### Events
|
|
686
|
-
|
|
687
|
-
|
|
|
688
|
-
| ---------------- | ------------ | ------------------------------------------------------------------ |
|
|
679
|
+
| 事件名 | 说明 | 回调参数 |
|
|
680
|
+
| --- | --- | --- |
|
|
689
681
|
| form-item-change | 表单项值变更 | `(name: string, value: any, formItem: SuperTableFormItem) => void` |
|
|
690
|
-
| scene-change
|
|
691
|
-
| sort-change
|
|
692
|
-
| row-sort-end
|
|
682
|
+
| scene-change | 场景切换 | `(scene: SuperTableQueryScene) => void` |
|
|
683
|
+
| sort-change | 排序变化 | `(sorter: any) => void` |
|
|
684
|
+
| row-sort-end | 行排序结束 | `(newData: any[]) => void` |
|
|
693
685
|
|
|
694
|
-
### Methods
|
|
695
686
|
|
|
696
|
-
|
|
697
|
-
|
|
|
698
|
-
|
|
|
699
|
-
|
|
|
700
|
-
|
|
|
701
|
-
|
|
|
702
|
-
|
|
|
703
|
-
|
|
|
704
|
-
|
|
|
705
|
-
|
|
|
706
|
-
|
|
|
687
|
+
### Methods
|
|
688
|
+
| 方法名 | 说明 | 参数 |
|
|
689
|
+
| ---------------- | ---------------- | --------------------------------------------------------- | --------------------------------- |
|
|
690
|
+
| getFormItem | 获取表单项配置 | `(name: string) => SuperTableFormItem | undefined` |
|
|
691
|
+
| setFormItem | 设置表单项配置 | `(name: string, keyPath: string, newConfig: any) => void` |
|
|
692
|
+
| getFormValue | 获取表单项值 | `(name: string) => any` |
|
|
693
|
+
| setFormValue | 设置表单项值 | `(name: string, value: any) => void` |
|
|
694
|
+
| getFormValues | 获取所有表单项值 | `(name?: string | string[]) => Record<string, any>` |
|
|
695
|
+
| setFormValues | 批量设置表单项值 | `(values: Record<string, any>) => void` |
|
|
696
|
+
| getTableData | 获取表格数据 | `() => any[]` |
|
|
697
|
+
| setTableData | 设置表格数据 | `(data: any[]) => void` |
|
|
698
|
+
| setTableDataItem | 修改单条数据 | `(index: number, data: Record<string, any>) => void` |
|
|
707
699
|
| onRefresh | 刷新表格数据 | `() => void` |
|
|
708
700
|
|
|
709
701
|
## TypeScript 类型定义
|
|
710
|
-
|
|
711
702
|
### 基础类型
|
|
712
|
-
|
|
713
703
|
```typescript
|
|
714
704
|
/** 表格列对应的type类型 */
|
|
715
705
|
export type SuperTableColumnType = 'text' | 'link' | 'button' | 'tag' | 'image' | 'component' | 'sort'
|
|
@@ -728,17 +718,16 @@ export type SuperTableFormItemType =
|
|
|
728
718
|
| 'component'
|
|
729
719
|
|
|
730
720
|
/** 表格单条数据 */
|
|
731
|
-
export type
|
|
721
|
+
export type SuperTableDataItem = Record<string, any>
|
|
732
722
|
|
|
733
723
|
/** 表格列吸附方式 */
|
|
734
|
-
export type
|
|
724
|
+
export type SuperTableColumnFixedType = 'left' | 'right'
|
|
735
725
|
|
|
736
726
|
/** 排序方式 */
|
|
737
|
-
export type
|
|
727
|
+
export type SuperTableSortOrders = 'ascend' | 'descend' | null
|
|
738
728
|
```
|
|
739
729
|
|
|
740
730
|
### 表格列配置
|
|
741
|
-
|
|
742
731
|
```typescript
|
|
743
732
|
/** 表格列配置 */
|
|
744
733
|
export interface SuperTableColumn {
|
|
@@ -746,25 +735,25 @@ export interface SuperTableColumn {
|
|
|
746
735
|
key: string
|
|
747
736
|
|
|
748
737
|
/** 展示类型 */
|
|
749
|
-
type?: SuperTableColumnType | ((row:
|
|
738
|
+
type?: SuperTableColumnType | ((row: SuperTableDataItem, index: number) => SuperTableColumnType)
|
|
750
739
|
|
|
751
740
|
/** 标题 */
|
|
752
741
|
title: string
|
|
753
742
|
|
|
754
743
|
/** 标题对应的提示信息 */
|
|
755
|
-
titleTooltip?: string | ((row:
|
|
744
|
+
titleTooltip?: string | ((row: SuperTableDataItem, index: number) => string)
|
|
756
745
|
|
|
757
746
|
/** 表格内容 */
|
|
758
|
-
content?: string | ((row:
|
|
747
|
+
content?: string | ((row: SuperTableDataItem, index: number) => any)
|
|
759
748
|
|
|
760
749
|
/** 表格内容对应的提示信息 */
|
|
761
|
-
tooltip?: string | boolean | ((row:
|
|
750
|
+
tooltip?: string | boolean | ((row: SuperTableDataItem, index: number) => string)
|
|
762
751
|
|
|
763
752
|
/** 表格内容解析自定义组件 */
|
|
764
753
|
component?: Component
|
|
765
754
|
|
|
766
755
|
/** 表格内容解析用到的组件组件对应的props */
|
|
767
|
-
props?: Record<string, any> | ((row:
|
|
756
|
+
props?: Record<string, any> | ((row: SuperTableDataItem, index: number) => Record<string, any>)
|
|
768
757
|
|
|
769
758
|
/** 是否可复制 */
|
|
770
759
|
copyable?: boolean
|
|
@@ -779,14 +768,13 @@ export interface SuperTableColumn {
|
|
|
779
768
|
width?: number
|
|
780
769
|
|
|
781
770
|
/** 固定列位置 */
|
|
782
|
-
fixed?:
|
|
771
|
+
fixed?: SuperTableColumnFixedType
|
|
783
772
|
|
|
784
773
|
[key: string]: any
|
|
785
774
|
}
|
|
786
775
|
```
|
|
787
776
|
|
|
788
777
|
### 查询条件配置
|
|
789
|
-
|
|
790
778
|
```typescript
|
|
791
779
|
/** 查询条件配置 */
|
|
792
780
|
export interface SuperTableFormItem {
|
|
@@ -852,7 +840,6 @@ export interface SuperTableFormItem {
|
|
|
852
840
|
```
|
|
853
841
|
|
|
854
842
|
### 场景管理类型
|
|
855
|
-
|
|
856
843
|
```typescript
|
|
857
844
|
/** 场景请求函数配置 */
|
|
858
845
|
export interface SceneRequestConfig {
|
|
@@ -918,7 +905,7 @@ export interface SuperTableQuerySceneItem {
|
|
|
918
905
|
}
|
|
919
906
|
|
|
920
907
|
/** 默认场景配置 */
|
|
921
|
-
export interface
|
|
908
|
+
export interface SuperTableDefaultSceneConfig {
|
|
922
909
|
/** 场景名称 */
|
|
923
910
|
name?: string
|
|
924
911
|
|
|
@@ -951,10 +938,9 @@ export interface SuperTableSceneState {
|
|
|
951
938
|
```
|
|
952
939
|
|
|
953
940
|
### 数据请求类型
|
|
954
|
-
|
|
955
941
|
```typescript
|
|
956
942
|
/** 数据请求方法 */
|
|
957
|
-
export type
|
|
943
|
+
export type SuperTableRequestFunction = (options: {
|
|
958
944
|
/** 查询参数 */
|
|
959
945
|
params: Record<string, any>
|
|
960
946
|
|
|
@@ -968,7 +954,7 @@ export type PropTableRequestFunction = (options: {
|
|
|
968
954
|
}) => Promise<{ total: number; data: Record<string, any>[] }>
|
|
969
955
|
|
|
970
956
|
/** 表格属性扩展 */
|
|
971
|
-
export interface
|
|
957
|
+
export interface SuperTableAntdProps extends TableProps {
|
|
972
958
|
pagination: PaginationProps
|
|
973
959
|
columns: SuperTableColumn[]
|
|
974
960
|
dataSource: Record<string, any>[]
|
|
@@ -976,55 +962,51 @@ export interface AntdTableProps extends TableProps {
|
|
|
976
962
|
```
|
|
977
963
|
|
|
978
964
|
## 注意事项
|
|
979
|
-
|
|
980
965
|
1. **依赖要求**：组件依赖于 Ant Design Vue，请确保项目中已安装相关依赖
|
|
981
966
|
2. **TypeScript 支持**：TypeScript 项目需要在 `tsconfig.json` 中配置类型声明文件路径
|
|
982
967
|
3. **自定义组件**：自定义组件需要通过 `component` 属性传入，并确保组件已全局注册或局部引入
|
|
983
968
|
4. **场景管理**：
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
969
|
+
- 场景管理功能需要配置 `sceneType` 属性
|
|
970
|
+
- 使用 `local` 存储模式时，场景数据保存在浏览器的 localStorage 中
|
|
971
|
+
- 使用 `api` 存储模式时，必须提供 `sceneRequest` 配置，否则会禁用场景功能并在控制台输出错误信息
|
|
987
972
|
5. **性能优化**：组件内置了防抖、虚拟滚动等性能优化，大数据量场景下表现良好
|
|
988
973
|
6. **响应式设计**：组件支持响应式布局，可根据屏幕尺寸自动调整
|
|
989
974
|
7. **主题定制**：支持通过 CSS 变量或 Ant Design 主题系统进行样式定制
|
|
990
975
|
|
|
991
976
|
## 更新日志
|
|
992
|
-
|
|
993
977
|
### v0.0.7
|
|
994
|
-
|
|
995
|
-
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
-
|
|
1010
|
-
|
|
1011
|
-
- 使用 CDN 方式确保图片在不同平台都能正确显示
|
|
978
|
+
+ 🔄 **重构场景管理API**：
|
|
979
|
+
- 将 `sceneRequestUrls` 重构为 `sceneRequest`
|
|
980
|
+
- 从传递URL字符串改为传递请求函数，提供更大的灵活性
|
|
981
|
+
- 支持自定义请求逻辑、错误处理和认证机制
|
|
982
|
+
+ 🔧 **优化错误处理**：
|
|
983
|
+
- 当 `sceneStorageType` 为 `'api'` 但未提供 `sceneRequest` 时，提供清晰的错误提示
|
|
984
|
+
- 实现优雅降级，避免应用崩溃
|
|
985
|
+
+ 🗑️ **移除冗余代码**：
|
|
986
|
+
- 删除 `apiSceneService` 中间层，直接使用 `sceneRequest`
|
|
987
|
+
- 简化架构，提高代码可维护性
|
|
988
|
+
+ 📚 **完善文档**：
|
|
989
|
+
- 更新API文档和类型定义
|
|
990
|
+
- 添加详细的配置示例和错误处理说明
|
|
991
|
+
- 提供本地存储和API存储两种模式的完整示例
|
|
992
|
+
+ 🖼️ **修复文档图片**：
|
|
993
|
+
- 修复 npm 包中示例图片无法显示的问题
|
|
994
|
+
- 使用 CDN 方式确保图片在不同平台都能正确显示
|
|
1012
995
|
|
|
1013
996
|
### v0.0.6
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
- 💄 优化UI样式和交互体验
|
|
997
|
+
+ 🐛 修复场景管理相关问题
|
|
998
|
+
+ 🐛 修复表格列配置缓存问题
|
|
999
|
+
+ 💄 优化UI样式和交互体验
|
|
1018
1000
|
|
|
1019
1001
|
### v0.0.2
|
|
1002
|
+
+ ✨ 新增表格拖拽排序功能
|
|
1003
|
+
+ ✨ 新增表格配置功能
|
|
1004
|
+
+ ✨ 新增自定义查询参数支持
|
|
1005
|
+
+ ✨ 新增多种插槽支持
|
|
1006
|
+
+ ✨ 新增级联选择和树形选择组件
|
|
1007
|
+
+ 🐛 修复场景管理相关问题
|
|
1008
|
+
+ 🐛 修复表格列配置缓存问题
|
|
1009
|
+
+ 💄 优化UI样式和交互体验
|
|
1010
|
+
+ 📚 完善TypeScript类型定义
|
|
1011
|
+
+ 📚 更新文档和示例代码
|
|
1020
1012
|
|
|
1021
|
-
- ✨ 新增表格拖拽排序功能
|
|
1022
|
-
- ✨ 新增表格配置功能
|
|
1023
|
-
- ✨ 新增自定义查询参数支持
|
|
1024
|
-
- ✨ 新增多种插槽支持
|
|
1025
|
-
- ✨ 新增级联选择和树形选择组件
|
|
1026
|
-
- 🐛 修复场景管理相关问题
|
|
1027
|
-
- 🐛 修复表格列配置缓存问题
|
|
1028
|
-
- 💄 优化UI样式和交互体验
|
|
1029
|
-
- 📚 完善TypeScript类型定义
|
|
1030
|
-
- 📚 更新文档和示例代码
|