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