@amaoaaaaa/search-table 0.4.0 → 0.5.1
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/CHANGELOG.md +126 -0
- package/README.md +150 -30
- package/dist/ProTable/index.vue.d.ts +10 -4
- package/dist/ProTable/types.d.ts +7 -0
- package/dist/SearchTable/index.d.ts +32 -2
- package/dist/SearchTable/index.vue.d.ts +103 -3962
- package/dist/SearchTable/types.d.ts +6 -1
- package/dist/SearchTable/useTableSort.d.ts +5 -5
- package/dist/index.d.ts +1 -0
- package/dist/search-table.js +492 -470
- package/dist/style.css +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# 更新日志
|
|
2
|
+
|
|
3
|
+
本文件记录 `@amaoaaaaa/search-table` 的所有重要变更。
|
|
4
|
+
|
|
5
|
+
格式参考 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.1.0/)，版本号遵循[语义化版本](https://semver.org/lang/zh-CN/)。
|
|
6
|
+
|
|
7
|
+
## [0.5.1] - 2026-10-21
|
|
8
|
+
|
|
9
|
+
### 修复
|
|
10
|
+
|
|
11
|
+
- 修复 `SearchTable` 未将默认排序和排序变化传递给 `el-table` 的问题，默认排序列现在会显示排序箭头，点击列头也会正常触发后端请求。
|
|
12
|
+
|
|
13
|
+
### 变更
|
|
14
|
+
|
|
15
|
+
- `defaultSort` 改为使用 `SortState<T>`，`sort` 会根据行数据类型推导实际字段名，并仅允许字符串字段。
|
|
16
|
+
- 对外导出 `SortState` 类型，调用方可显式标注以获取排序字段自动补全。
|
|
17
|
+
- 补充默认排序与后端排序的配合说明。
|
|
18
|
+
|
|
19
|
+
## [0.5.0] - 2026-10-13
|
|
20
|
+
|
|
21
|
+
### 新增
|
|
22
|
+
|
|
23
|
+
- 表格区支持 `#table` 插槽：可用自定义组件（如卡片列表）替换内置 `ProTable` 的渲染，插槽提供 `data`、`loading`、`columns`、`indexOffset`、`defaultSort`、`applyFilter`、`selectionChange`、`cellEdit`、`sortChange` 等 props。
|
|
24
|
+
|
|
25
|
+
### 变更
|
|
26
|
+
|
|
27
|
+
- `SearchTable` 改为泛型组件：行数据类型 `T` 由 `columns`、`fetchFn` 推断，并传递到插槽 props、事件参数与实例类型上。
|
|
28
|
+
- `SearchTableInstance` 由 `InstanceType<typeof SearchTable>` 改为显式声明的泛型接口 `SearchTableInstance<T>`（`InstanceType` 对泛型组件不生效）；需要组件实例的完整类型时改用 `useTemplateRef('searchTableRef')`。
|
|
29
|
+
|
|
30
|
+
### 注意
|
|
31
|
+
|
|
32
|
+
- 使用 `#table` 插槽时不再按容器高度自动计算每页条数：未显式传入 `pageSize` 时使用默认值 `10`，并在控制台提示。
|
|
33
|
+
- 表格区的布局类（`search-table__body flex-1 overflow-hidden`）需由使用方自行维护。
|
|
34
|
+
|
|
35
|
+
## [0.4.0] - 2026-09-30
|
|
36
|
+
|
|
37
|
+
### 新增
|
|
38
|
+
|
|
39
|
+
- `SearchTableConfigProvider` 新增 `paginationProps`，可全局配置分页组件的视觉（`size`、`background`、`pagerCount`、`layout`、`prevText` 等）。
|
|
40
|
+
- `SearchTableConfigProvider` 新增 `searchProps`，当前支持 `buttonText` 全局配置搜索按钮文字。
|
|
41
|
+
|
|
42
|
+
### 变更
|
|
43
|
+
|
|
44
|
+
- `SearchTable` 的 `elPaginationProps` 类型放宽为 `SearchTablePaginationProps`，与全局 `paginationProps` 支持完全相同的字段。
|
|
45
|
+
- 搜索区配置改为由 `searchProps` 对象承载，实例级用 `searchButtonText` 覆盖；后续新增搜索区配置直接往对象里加字段。
|
|
46
|
+
- 配置优先级：`elPaginationProps`（实例级）> `paginationProps`（全局）> 默认配置；`searchButtonText`（实例级）> `searchProps.buttonText`（全局）> 默认值。
|
|
47
|
+
|
|
48
|
+
## [0.3.0] - 2026-09-28
|
|
49
|
+
|
|
50
|
+
### 新增
|
|
51
|
+
|
|
52
|
+
- 新增全局配置组件 `SearchTableConfigProvider`，可覆盖表格行高 `rowHeight` 与表头高度 `headerHeight`，修正业务自定义表格样式后每页条数计算错误的问题。
|
|
53
|
+
- 导出 `SearchTableConfigProvider` 组件与 `SearchTableConfigProviderProps` 类型。
|
|
54
|
+
|
|
55
|
+
## [0.2.3] - 2026-09-28
|
|
56
|
+
|
|
57
|
+
### 新增
|
|
58
|
+
|
|
59
|
+
- 各区域按 BEM 规范补充可外部覆盖的类名（`search-table__toolbar`、`search-table__search-input`、`search-table__search-button`、`search-table__actions`、`search-table__footer`、`search-table__pagination` 等），可通过 `:deep()` 定制样式。
|
|
60
|
+
|
|
61
|
+
## [0.2.2] - 2026-09-28
|
|
62
|
+
|
|
63
|
+
### 优化
|
|
64
|
+
|
|
65
|
+
- `PageResp` 的 `success`、`code`、`offset`、`limit`、`totalCount`、`currPageIndex`、`pageCount` 改为可选，兼容分页接口只返回其中部分字段的情况。
|
|
66
|
+
|
|
67
|
+
## [0.2.1] - 2026-08-10
|
|
68
|
+
|
|
69
|
+
### 其它
|
|
70
|
+
|
|
71
|
+
- `package.json` 补充 `homepage`、`repository`、`bugs`、`keywords` 等仓库信息。
|
|
72
|
+
|
|
73
|
+
## [0.2.0] - 2026-08-10
|
|
74
|
+
|
|
75
|
+
### 新增
|
|
76
|
+
|
|
77
|
+
- 新增 `searchField` prop，可自定义搜索框绑定到查询参数的字段名（默认 `search`），适配后端搜索参数名不一致的场景。
|
|
78
|
+
|
|
79
|
+
## [0.1.3] - 2026-06-29
|
|
80
|
+
|
|
81
|
+
### 重构
|
|
82
|
+
|
|
83
|
+
- 新增 `SearchTableInstance` 类型导出。
|
|
84
|
+
- 新增 `SearchTableColumn`、`SearchTableAction` 类型别名，作为 `ProTableColumn`、`ProTableAction` 的语义化命名。
|
|
85
|
+
- 收敛工具导出：`SelectionStore`、`useTableSort`、`useDelayedRef`、`parseErrorReason` 不再对外暴露。
|
|
86
|
+
|
|
87
|
+
## [0.1.2] - 2026-06-26
|
|
88
|
+
|
|
89
|
+
### 修复
|
|
90
|
+
|
|
91
|
+
- 修复 `SearchTable`、`ProTable` 内部模板 ref 重名导致的 Vue 控制台警告（`Set operation on key "value" failed: target is readonly`）。
|
|
92
|
+
|
|
93
|
+
## [0.1.1] - 2026-06-25
|
|
94
|
+
|
|
95
|
+
### 修复
|
|
96
|
+
|
|
97
|
+
- 修复打包未排除外部依赖的问题：`vue`、`element-plus`、`axios`、`lodash-es`、`@amaoaaaaa/v-text-ellipsis` 等不再被打入产物。
|
|
98
|
+
- 修复 `RenderFormatterResult` 组件使用 `v-html` 产生的警告。
|
|
99
|
+
|
|
100
|
+
### 构建
|
|
101
|
+
|
|
102
|
+
- 新增 `build:analyze` 脚本，接入 `rollup-plugin-visualizer` 输出打包体积分析报告（`stats.html`）。
|
|
103
|
+
|
|
104
|
+
## [0.1.0-beta.1] - 2026-06-17
|
|
105
|
+
|
|
106
|
+
### 新增
|
|
107
|
+
|
|
108
|
+
- 首个版本：从完整项目中抽离 `SearchTable`、`ProTable` 组件及配套工具（`SelectionStore`、`useTableSort`、`useDelayedRef`、`parseErrorReason`）。
|
|
109
|
+
- 支持搜索、分页（按容器高度自动计算每页条数）、列排序、列筛选（单选 / 多选 / 时间范围）、跨页勾选、单元格内联编辑。
|
|
110
|
+
|
|
111
|
+
### 变更
|
|
112
|
+
|
|
113
|
+
- 移除自动导入机制，组件与函数改为显式导入。
|
|
114
|
+
- `element-plus` peer 依赖升级到 `^2.14.2`，`TableRow` 等类型对齐 element-plus 的类型定义。
|
|
115
|
+
|
|
116
|
+
[0.5.0]: https://github.com/amaoaaaaa/search-table/compare/537f3a9...92abeaa
|
|
117
|
+
[0.4.0]: https://github.com/amaoaaaaa/search-table/compare/fc99483...537f3a9
|
|
118
|
+
[0.3.0]: https://github.com/amaoaaaaa/search-table/compare/5d11cd0...fc99483
|
|
119
|
+
[0.2.3]: https://github.com/amaoaaaaa/search-table/compare/850550f...5d11cd0
|
|
120
|
+
[0.2.2]: https://github.com/amaoaaaaa/search-table/compare/ee2d0e7...850550f
|
|
121
|
+
[0.2.1]: https://github.com/amaoaaaaa/search-table/compare/70af915...ee2d0e7
|
|
122
|
+
[0.2.0]: https://github.com/amaoaaaaa/search-table/compare/9ac5fe0...70af915
|
|
123
|
+
[0.1.3]: https://github.com/amaoaaaaa/search-table/compare/30633b8...9ac5fe0
|
|
124
|
+
[0.1.2]: https://github.com/amaoaaaaa/search-table/compare/c989b33...30633b8
|
|
125
|
+
[0.1.1]: https://github.com/amaoaaaaa/search-table/compare/e544019...c989b33
|
|
126
|
+
[0.1.0-beta.1]: https://github.com/amaoaaaaa/search-table/compare/be176ab...e544019
|
package/README.md
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
- ☑️ 跨页勾选（手动管理 selection state）
|
|
12
12
|
- ✏️ 单元格内联编辑
|
|
13
13
|
- 🎨 内置 ProTable 组件，可独立使用
|
|
14
|
+
- 🧩 表格区支持插槽替换，可用自定义组件渲染
|
|
14
15
|
- 📦 图标构建时内联 SVG，零网络请求，离线可用
|
|
15
16
|
|
|
16
17
|
## 安装
|
|
@@ -56,11 +57,11 @@ npm install vue element-plus axios lodash-es
|
|
|
56
57
|
</template>
|
|
57
58
|
|
|
58
59
|
<script setup lang="ts">
|
|
59
|
-
import {
|
|
60
|
+
import { useTemplateRef } from 'vue';
|
|
60
61
|
import { SearchTable } from '@amaoaaaaa/search-table';
|
|
61
62
|
import type { SearchTableProps, PageParams, PageResp } from '@amaoaaaaa/search-table';
|
|
62
63
|
|
|
63
|
-
const searchTableRef =
|
|
64
|
+
const searchTableRef = useTemplateRef('searchTableRef');
|
|
64
65
|
|
|
65
66
|
const columns = [
|
|
66
67
|
{ label: '姓名', prop: 'name' },
|
|
@@ -115,26 +116,127 @@ const columns = [{ label: '姓名', prop: 'name' }];
|
|
|
115
116
|
| `showBatchDeleteButton` | `boolean` | `false` | 是否显示批量删除按钮 |
|
|
116
117
|
| `pageSize` | `number` | 自动计算 | 每页条数 |
|
|
117
118
|
| `elPaginationProps` | `SearchTablePaginationProps` | - | 分页组件视觉配置（见下方说明） |
|
|
118
|
-
| `defaultSort` | `SortState` | - |
|
|
119
|
+
| `defaultSort` | `SortState` | - | 默认排序（支持后端排序） |
|
|
119
120
|
| `selectable` | `boolean \| (row, index) => boolean` | - | 是否可勾选 |
|
|
120
121
|
| `searchParamsHandler` | `(params) => params` | - | 搜索参数处理函数 |
|
|
121
122
|
|
|
123
|
+
`defaultSort` 的 `sort`、`order` 会作为请求参数传给 `fetchFn`。使用后端排序时，排序字段对应的列需设置 `sortable: 'custom'`，列 `prop` 与 `sort` 保持一致；排序变化后组件会重新请求后端，由后端返回排序后的分页数据。
|
|
124
|
+
|
|
125
|
+
`SortState<T>` 会根据行数据类型约束排序字段。推荐显式标注，以便获得实际字段的自动补全：
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
import type { SortState } from '@amaoaaaaa/search-table';
|
|
129
|
+
|
|
130
|
+
const defaultSort: SortState<User> = {
|
|
131
|
+
sort: 'createTime',
|
|
132
|
+
order: 'desc',
|
|
133
|
+
};
|
|
134
|
+
```
|
|
135
|
+
|
|
122
136
|
### SearchTable Events
|
|
123
137
|
|
|
124
|
-
| 事件名 | 参数
|
|
125
|
-
| -------------- |
|
|
126
|
-
| `add` | -
|
|
127
|
-
| `batch-delete` | `rows:
|
|
128
|
-
| `cell-edit` | `CellEditPayload
|
|
138
|
+
| 事件名 | 参数 | 说明 |
|
|
139
|
+
| -------------- | -------------------- | ---------------- |
|
|
140
|
+
| `add` | - | 点击新增按钮 |
|
|
141
|
+
| `batch-delete` | `rows: T[]` | 点击批量删除按钮 |
|
|
142
|
+
| `cell-edit` | `CellEditPayload<T>` | 单元格编辑完成 |
|
|
129
143
|
|
|
130
144
|
### SearchTable Expose
|
|
131
145
|
|
|
132
|
-
| 方法/属性 | 类型
|
|
133
|
-
| ------------------ |
|
|
134
|
-
| `refresh` | `() => Promise<void>`
|
|
135
|
-
| `selectedRows` | `
|
|
136
|
-
| `getSelectionRows` | `() =>
|
|
137
|
-
| `selectRows` | `(rows:
|
|
146
|
+
| 方法/属性 | 类型 | 说明 |
|
|
147
|
+
| ------------------ | --------------------- | -------------- |
|
|
148
|
+
| `refresh` | `() => Promise<void>` | 刷新当前页 |
|
|
149
|
+
| `selectedRows` | `T[]` | 已勾选的行 |
|
|
150
|
+
| `getSelectionRows` | `() => T[]` | 获取已勾选的行 |
|
|
151
|
+
| `selectRows` | `(rows: T[]) => void` | 勾选指定行 |
|
|
152
|
+
|
|
153
|
+
`selectedRows` 暴露的是 ref，但读取时会自动解包，所以拿到的是数组本身。
|
|
154
|
+
|
|
155
|
+
### 行数据类型（泛型组件）
|
|
156
|
+
|
|
157
|
+
`SearchTable` 是泛型组件，行数据类型 `T` 由 `columns` 与 `fetchFn` 推断，并会一路带到插槽 props、事件参数和暴露的实例方法上：
|
|
158
|
+
|
|
159
|
+
```vue
|
|
160
|
+
<template>
|
|
161
|
+
<SearchTable ref="searchTableRef" :columns="columns" :fetch-fn="fetchFn">
|
|
162
|
+
<!-- data 会被推断为 User[] -->
|
|
163
|
+
<template #table="{ data }">{{ data[0]?.name }}</template>
|
|
164
|
+
</SearchTable>
|
|
165
|
+
</template>
|
|
166
|
+
|
|
167
|
+
<script setup lang="ts">
|
|
168
|
+
import { useTemplateRef } from 'vue';
|
|
169
|
+
import type { ProTableColumn, SearchTableFetchFn } from '@amaoaaaaa/search-table';
|
|
170
|
+
|
|
171
|
+
interface User {
|
|
172
|
+
id: number;
|
|
173
|
+
name: string;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
const columns: ProTableColumn<User>[] = [{ prop: 'name', label: '姓名' }];
|
|
177
|
+
const fetchFn: SearchTableFetchFn<User> = async () => ({ data: [], totalCount: 0 });
|
|
178
|
+
|
|
179
|
+
const searchTableRef = useTemplateRef('searchTableRef');
|
|
180
|
+
</script>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
`columns` / `fetchFn` 建议显式标注类型（如 `ProTableColumn<User>[]`、`SearchTableFetchFn<User>`），这样 `T` 才能被准确推断。
|
|
184
|
+
|
|
185
|
+
> `InstanceType<typeof SearchTable>` 对泛型组件不生效（会报 `does not satisfy the constraint 'abstract new (...args: any) => any'`），需要实例类型时用 `useTemplateRef('ref')`（类型最完整），或导出的 `SearchTableInstance<T>`：
|
|
186
|
+
>
|
|
187
|
+
> ```ts
|
|
188
|
+
> import { ref } from 'vue';
|
|
189
|
+
> import type { SearchTableInstance } from '@amaoaaaaa/search-table';
|
|
190
|
+
>
|
|
191
|
+
> const searchTableRef = ref<SearchTableInstance<User>>();
|
|
192
|
+
> ```
|
|
193
|
+
|
|
194
|
+
### SearchTable Slots
|
|
195
|
+
|
|
196
|
+
| 插槽名 | 插槽 props | 说明 |
|
|
197
|
+
| ------------- | ------------------- | --------------------------------------------------------- |
|
|
198
|
+
| `search-form` | `{ query, search }` | 搜索框右侧的更多搜索条件，`search` 表示重置到第一页并请求 |
|
|
199
|
+
| `top-center` | - | 顶部区域中间内容 |
|
|
200
|
+
| `btns` | - | 操作区追加按钮（排在新增 / 批量删除之后） |
|
|
201
|
+
| `table` | 见下方 | 替换默认的表格渲染，不传时渲染内置 `ProTable` |
|
|
202
|
+
|
|
203
|
+
#### `table` 插槽
|
|
204
|
+
|
|
205
|
+
用于把默认的 `ProTable` 换成自定义表格（如卡片列表、其它表格组件），插槽 props 与传给 `ProTable` 的绑定保持一致：
|
|
206
|
+
|
|
207
|
+
| 名称 | 类型 | 说明 |
|
|
208
|
+
| ----------------- | --------------------------------------- | --------------------------------- |
|
|
209
|
+
| `data` | `T[]` | 当前页数据 |
|
|
210
|
+
| `loading` | `boolean` | 加载状态（延迟 100ms，避免闪烁） |
|
|
211
|
+
| `columns` | `ProTableColumn<T>[]` | 传入 `SearchTable` 的列配置 |
|
|
212
|
+
| `indexOffset` | `number` | 序号列的起始偏移量 |
|
|
213
|
+
| `defaultSort` | `{ prop, order }` | 默认排序（element-plus 排序顺序） |
|
|
214
|
+
| `applyFilter` | `(payload: ApplyFilterPayload) => void` | 应用列筛选条件 |
|
|
215
|
+
| `selectionChange` | `(rows: T[]) => void` | 勾选变化 |
|
|
216
|
+
| `cellEdit` | `(payload: CellEditPayload<T>) => void` | 单元格编辑完成 |
|
|
217
|
+
| `sortChange` | `(payload) => void` | 排序变化 |
|
|
218
|
+
|
|
219
|
+
其中 `T` 为行数据类型，见「行数据类型（泛型组件）」。
|
|
220
|
+
|
|
221
|
+
```vue
|
|
222
|
+
<template>
|
|
223
|
+
<SearchTable :columns="columns" :fetch-fn="fetchData">
|
|
224
|
+
<template #table="{ data, loading }">
|
|
225
|
+
<MyCardList
|
|
226
|
+
class="search-table__body flex-1 overflow-hidden"
|
|
227
|
+
:data="data"
|
|
228
|
+
:loading="loading"
|
|
229
|
+
/>
|
|
230
|
+
</template>
|
|
231
|
+
</SearchTable>
|
|
232
|
+
</template>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
使用 `table` 插槽时需要注意：
|
|
236
|
+
|
|
237
|
+
- 分页、搜索、筛选、排序仍由 `SearchTable` 管理（请求参数中的 `limit` / `offset` 也一样），插槽只负责表格区的渲染。
|
|
238
|
+
- 表格区的布局类（`search-table__body flex-1 overflow-hidden`）由使用方自己维护，默认的 `ProTable` 才有这些类名。
|
|
239
|
+
- 不再按容器高度自动计算每页条数：未显式传 `pageSize` 时使用默认值 `10`，并在控制台提示，需要其它条数请显式传入 `pageSize`。
|
|
138
240
|
|
|
139
241
|
### SearchTable 样式定制
|
|
140
242
|
|
|
@@ -152,22 +254,22 @@ const columns = [{ label: '姓名', prop: 'name' }];
|
|
|
152
254
|
</style>
|
|
153
255
|
```
|
|
154
256
|
|
|
155
|
-
| 类名 | 说明
|
|
156
|
-
| -------------------------------------- |
|
|
157
|
-
| `search-table` | 根容器
|
|
158
|
-
| `search-table__toolbar` | 顶部区域（搜索区 + 操作区）
|
|
159
|
-
| `search-table__search` | 左侧搜索组（搜索框 + 搜索表单 + 搜索按钮）
|
|
160
|
-
| `search-table__search-input` | 搜索输入框
|
|
161
|
-
| `search-table__search-button` | 搜索按钮
|
|
162
|
-
| `search-table__actions` | 右侧操作按钮组（新增 / 批量删除 / 插槽）
|
|
163
|
-
| `search-table__add-button` | 新增按钮
|
|
164
|
-
| `search-table__batch-delete-button` | 批量删除按钮
|
|
165
|
-
| `search-table__body` |
|
|
166
|
-
| `search-table__footer` | 底部分页区域
|
|
167
|
-
| `search-table__selection` | 已选条数提示区域
|
|
168
|
-
| `search-table__clear-selection-button` | 清空勾选按钮
|
|
169
|
-
| `search-table__pagination` | 分页组件
|
|
170
|
-
| `search-table__footer-spacer` | 分页区域右侧占位（用于保持分页居中）
|
|
257
|
+
| 类名 | 说明 |
|
|
258
|
+
| -------------------------------------- | --------------------------------------------------------------- |
|
|
259
|
+
| `search-table` | 根容器 |
|
|
260
|
+
| `search-table__toolbar` | 顶部区域（搜索区 + 操作区） |
|
|
261
|
+
| `search-table__search` | 左侧搜索组（搜索框 + 搜索表单 + 搜索按钮） |
|
|
262
|
+
| `search-table__search-input` | 搜索输入框 |
|
|
263
|
+
| `search-table__search-button` | 搜索按钮 |
|
|
264
|
+
| `search-table__actions` | 右侧操作按钮组（新增 / 批量删除 / 插槽） |
|
|
265
|
+
| `search-table__add-button` | 新增按钮 |
|
|
266
|
+
| `search-table__batch-delete-button` | 批量删除按钮 |
|
|
267
|
+
| `search-table__body` | 表格区域（默认为 ProTable 根节点，用 `table` 插槽时需自行添加） |
|
|
268
|
+
| `search-table__footer` | 底部分页区域 |
|
|
269
|
+
| `search-table__selection` | 已选条数提示区域 |
|
|
270
|
+
| `search-table__clear-selection-button` | 清空勾选按钮 |
|
|
271
|
+
| `search-table__pagination` | 分页组件 |
|
|
272
|
+
| `search-table__footer-spacer` | 分页区域右侧占位（用于保持分页居中） |
|
|
171
273
|
|
|
172
274
|
### SearchTableConfigProvider 全局配置
|
|
173
275
|
|
|
@@ -248,6 +350,24 @@ import { SearchTable, SearchTableConfigProvider } from '@amaoaaaaa/search-table'
|
|
|
248
350
|
|
|
249
351
|
**工具：** `SelectionStore`, `useTableSort`, `useDelayedRef`, `parseErrorReason`
|
|
250
352
|
|
|
353
|
+
## 更新日志
|
|
354
|
+
|
|
355
|
+
| 版本 | 日期 | 主要变更 |
|
|
356
|
+
| ------------ | ---------- | --------------------------------------------------------------- |
|
|
357
|
+
| 0.5.0 | 2026-10-13 | 表格区支持 `#table` 插槽替换；`SearchTable` 改为泛型组件 |
|
|
358
|
+
| 0.4.0 | 2026-09-30 | `SearchTableConfigProvider` 支持全局分页与搜索区域配置 |
|
|
359
|
+
| 0.3.0 | 2026-09-28 | 新增全局配置组件 `SearchTableConfigProvider`（行高 / 表头高度） |
|
|
360
|
+
| 0.2.3 | 2026-09-28 | 各区域补充可外部覆盖的 BEM 类名 |
|
|
361
|
+
| 0.2.2 | 2026-09-28 | 分页接口返回类型兼容更多可选属性 |
|
|
362
|
+
| 0.2.1 | 2026-08-10 | 补充仓库信息 |
|
|
363
|
+
| 0.2.0 | 2026-08-10 | 新增 `searchField`，支持自定义搜索框绑定的字段名 |
|
|
364
|
+
| 0.1.3 | 2026-06-29 | 重构类型导出，新增 `SearchTableInstance` 等类型 |
|
|
365
|
+
| 0.1.2 | 2026-06-26 | 修复模板 ref 重名引起的 Vue 控制台警告 |
|
|
366
|
+
| 0.1.1 | 2026-06-25 | 修复外部依赖未排除的打包问题 |
|
|
367
|
+
| 0.1.0-beta.1 | 2026-06-17 | 首个版本，从完整项目中抽离 SearchTable / ProTable |
|
|
368
|
+
|
|
369
|
+
完整变更记录见 [CHANGELOG.md](./CHANGELOG.md)。
|
|
370
|
+
|
|
251
371
|
## License
|
|
252
372
|
|
|
253
373
|
MIT
|
|
@@ -558,8 +558,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
|
558
558
|
e: (element?: string) => string;
|
|
559
559
|
m: (modifier?: string) => string;
|
|
560
560
|
be: (blockSuffix?: string, element?: string) => string;
|
|
561
|
-
em: (element?: string, modifier
|
|
562
|
-
/** @type { [typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, ] } */ ? /** @type { [typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, ] } */: string) => string;
|
|
561
|
+
em: (element?: string, modifier?: string) => string;
|
|
563
562
|
bm: (blockSuffix?: string, modifier?: string) => string;
|
|
564
563
|
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
|
565
564
|
is: {
|
|
@@ -642,11 +641,19 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
|
642
641
|
applyFilter: (args_0: ApplyFilterPayload) => any;
|
|
643
642
|
selectionChange: (newSelection: import('element-plus/es/components/table/src/table/defaults.mjs').DefaultRow[]) => any;
|
|
644
643
|
"cell-edit": (payload: CellEditPayload) => any;
|
|
644
|
+
sortChange: (payload: {
|
|
645
|
+
prop: string;
|
|
646
|
+
order: "ascending" | "descending" | null;
|
|
647
|
+
}) => any;
|
|
645
648
|
"update:filterData": (value: Record<string, any>) => any;
|
|
646
649
|
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
647
650
|
onApplyFilter?: ((args_0: ApplyFilterPayload) => any) | undefined;
|
|
648
651
|
onSelectionChange?: ((newSelection: import('element-plus/es/components/table/src/table/defaults.mjs').DefaultRow[]) => any) | undefined;
|
|
649
652
|
"onCell-edit"?: ((payload: CellEditPayload) => any) | undefined;
|
|
653
|
+
onSortChange?: ((payload: {
|
|
654
|
+
prop: string;
|
|
655
|
+
order: "ascending" | "descending" | null;
|
|
656
|
+
}) => any) | undefined;
|
|
650
657
|
"onUpdate:filterData"?: ((value: Record<string, any>) => any) | undefined;
|
|
651
658
|
}>, {
|
|
652
659
|
rowKey: string;
|
|
@@ -1207,8 +1214,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
|
|
|
1207
1214
|
e: (element?: string) => string;
|
|
1208
1215
|
m: (modifier?: string) => string;
|
|
1209
1216
|
be: (blockSuffix?: string, element?: string) => string;
|
|
1210
|
-
em: (element?: string, modifier
|
|
1211
|
-
/** @type { [typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, ] } */ ? /** @type { [typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, typeof __VLS_components.ElRadioGroup, typeof __VLS_components.elRadioGroup, ] } */: string) => string;
|
|
1217
|
+
em: (element?: string, modifier?: string) => string;
|
|
1212
1218
|
bm: (blockSuffix?: string, modifier?: string) => string;
|
|
1213
1219
|
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
|
1214
1220
|
is: {
|
package/dist/ProTable/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { MaybeRefOrGetter } from 'vue';
|
|
2
|
+
import { Sort } from 'element-plus';
|
|
2
3
|
import { TableColumnProps } from 'element-plus/es/components/table/src/table-column/defaults';
|
|
3
4
|
import { DefaultRow } from 'element-plus/es/components/table/src/table/defaults.mjs';
|
|
4
5
|
export type TableRow = DefaultRow;
|
|
@@ -111,6 +112,12 @@ export type ProTableColumn<T extends TableRow = TableRow> = Partial<Omit<TableCo
|
|
|
111
112
|
export type ProTableProps<T extends TableRow = any> = {
|
|
112
113
|
data: T[];
|
|
113
114
|
columns: ProTableColumn<T>[];
|
|
115
|
+
/**
|
|
116
|
+
* 默认排序
|
|
117
|
+
*
|
|
118
|
+
* @description 使用 Element Plus 的排序格式，`prop` 需与可排序列的 `prop` 一致
|
|
119
|
+
*/
|
|
120
|
+
defaultSort?: Sort;
|
|
114
121
|
/**
|
|
115
122
|
* 行数据的 Key，属性值必须唯一
|
|
116
123
|
*
|
|
@@ -1,2 +1,32 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { TableRow } from '../ProTable/types';
|
|
2
|
+
/**
|
|
3
|
+
* SearchTable 暴露出来的实例 API
|
|
4
|
+
*
|
|
5
|
+
* @description
|
|
6
|
+
* 行数据类型 `T` 由 `fetchFn` / `columns` 自动推断，也可以在声明 ref 时手动指定
|
|
7
|
+
* （如 `ref<SearchTableInstance<User>>()`）。
|
|
8
|
+
*
|
|
9
|
+
* 注意：`SearchTable` 是泛型组件，`InstanceType<typeof SearchTable>` 对泛型组件
|
|
10
|
+
* 不生效，因此这里显式声明 `defineExpose` 暴露出来的成员；需要组件实例的完整类型
|
|
11
|
+
* （`$el`、`$props` 等）时，推荐用 `useTemplateRef('searchTableRef')`。
|
|
12
|
+
*/
|
|
13
|
+
export interface SearchTableInstance<T extends TableRow = any> {
|
|
14
|
+
/**
|
|
15
|
+
* 刷新当前页
|
|
16
|
+
*/
|
|
17
|
+
refresh: () => Promise<void>;
|
|
18
|
+
/**
|
|
19
|
+
* 已勾选的行
|
|
20
|
+
*
|
|
21
|
+
* @description `defineExpose` 暴露的 ref 会被自动解包，因此这里是数组本身
|
|
22
|
+
*/
|
|
23
|
+
selectedRows: T[];
|
|
24
|
+
/**
|
|
25
|
+
* 获取已勾选的行
|
|
26
|
+
*/
|
|
27
|
+
getSelectionRows: () => T[];
|
|
28
|
+
/**
|
|
29
|
+
* 勾选指定行
|
|
30
|
+
*/
|
|
31
|
+
selectRows: (rows: T[]) => void;
|
|
32
|
+
}
|