@amaoaaaaa/search-table 0.3.0 → 0.5.0
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 +114 -0
- package/README.md +199 -50
- package/dist/SearchTable/ConfigProvider.vue.d.ts +2 -0
- package/dist/SearchTable/config.d.ts +42 -9
- package/dist/SearchTable/index.d.ts +32 -2
- package/dist/SearchTable/index.vue.d.ts +103 -3962
- package/dist/SearchTable/types.d.ts +37 -2
- package/dist/index.d.ts +1 -1
- package/dist/search-table.js +434 -384
- package/dist/style.css +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
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.0] - 2026-10-13
|
|
8
|
+
|
|
9
|
+
### 新增
|
|
10
|
+
|
|
11
|
+
- 表格区支持 `#table` 插槽：可用自定义组件（如卡片列表）替换内置 `ProTable` 的渲染，插槽提供 `data`、`loading`、`columns`、`indexOffset`、`defaultSort`、`applyFilter`、`selectionChange`、`cellEdit`、`sortChange` 等 props。
|
|
12
|
+
|
|
13
|
+
### 变更
|
|
14
|
+
|
|
15
|
+
- `SearchTable` 改为泛型组件：行数据类型 `T` 由 `columns`、`fetchFn` 推断，并传递到插槽 props、事件参数与实例类型上。
|
|
16
|
+
- `SearchTableInstance` 由 `InstanceType<typeof SearchTable>` 改为显式声明的泛型接口 `SearchTableInstance<T>`（`InstanceType` 对泛型组件不生效）；需要组件实例的完整类型时改用 `useTemplateRef('searchTableRef')`。
|
|
17
|
+
|
|
18
|
+
### 注意
|
|
19
|
+
|
|
20
|
+
- 使用 `#table` 插槽时不再按容器高度自动计算每页条数：未显式传入 `pageSize` 时使用默认值 `10`，并在控制台提示。
|
|
21
|
+
- 表格区的布局类（`search-table__body flex-1 overflow-hidden`）需由使用方自行维护。
|
|
22
|
+
|
|
23
|
+
## [0.4.0] - 2026-09-30
|
|
24
|
+
|
|
25
|
+
### 新增
|
|
26
|
+
|
|
27
|
+
- `SearchTableConfigProvider` 新增 `paginationProps`，可全局配置分页组件的视觉（`size`、`background`、`pagerCount`、`layout`、`prevText` 等）。
|
|
28
|
+
- `SearchTableConfigProvider` 新增 `searchProps`，当前支持 `buttonText` 全局配置搜索按钮文字。
|
|
29
|
+
|
|
30
|
+
### 变更
|
|
31
|
+
|
|
32
|
+
- `SearchTable` 的 `elPaginationProps` 类型放宽为 `SearchTablePaginationProps`，与全局 `paginationProps` 支持完全相同的字段。
|
|
33
|
+
- 搜索区配置改为由 `searchProps` 对象承载，实例级用 `searchButtonText` 覆盖；后续新增搜索区配置直接往对象里加字段。
|
|
34
|
+
- 配置优先级：`elPaginationProps`（实例级）> `paginationProps`（全局）> 默认配置；`searchButtonText`（实例级）> `searchProps.buttonText`（全局）> 默认值。
|
|
35
|
+
|
|
36
|
+
## [0.3.0] - 2026-09-28
|
|
37
|
+
|
|
38
|
+
### 新增
|
|
39
|
+
|
|
40
|
+
- 新增全局配置组件 `SearchTableConfigProvider`，可覆盖表格行高 `rowHeight` 与表头高度 `headerHeight`，修正业务自定义表格样式后每页条数计算错误的问题。
|
|
41
|
+
- 导出 `SearchTableConfigProvider` 组件与 `SearchTableConfigProviderProps` 类型。
|
|
42
|
+
|
|
43
|
+
## [0.2.3] - 2026-09-28
|
|
44
|
+
|
|
45
|
+
### 新增
|
|
46
|
+
|
|
47
|
+
- 各区域按 BEM 规范补充可外部覆盖的类名（`search-table__toolbar`、`search-table__search-input`、`search-table__search-button`、`search-table__actions`、`search-table__footer`、`search-table__pagination` 等），可通过 `:deep()` 定制样式。
|
|
48
|
+
|
|
49
|
+
## [0.2.2] - 2026-09-28
|
|
50
|
+
|
|
51
|
+
### 优化
|
|
52
|
+
|
|
53
|
+
- `PageResp` 的 `success`、`code`、`offset`、`limit`、`totalCount`、`currPageIndex`、`pageCount` 改为可选，兼容分页接口只返回其中部分字段的情况。
|
|
54
|
+
|
|
55
|
+
## [0.2.1] - 2026-08-10
|
|
56
|
+
|
|
57
|
+
### 其它
|
|
58
|
+
|
|
59
|
+
- `package.json` 补充 `homepage`、`repository`、`bugs`、`keywords` 等仓库信息。
|
|
60
|
+
|
|
61
|
+
## [0.2.0] - 2026-08-10
|
|
62
|
+
|
|
63
|
+
### 新增
|
|
64
|
+
|
|
65
|
+
- 新增 `searchField` prop，可自定义搜索框绑定到查询参数的字段名（默认 `search`），适配后端搜索参数名不一致的场景。
|
|
66
|
+
|
|
67
|
+
## [0.1.3] - 2026-06-29
|
|
68
|
+
|
|
69
|
+
### 重构
|
|
70
|
+
|
|
71
|
+
- 新增 `SearchTableInstance` 类型导出。
|
|
72
|
+
- 新增 `SearchTableColumn`、`SearchTableAction` 类型别名，作为 `ProTableColumn`、`ProTableAction` 的语义化命名。
|
|
73
|
+
- 收敛工具导出：`SelectionStore`、`useTableSort`、`useDelayedRef`、`parseErrorReason` 不再对外暴露。
|
|
74
|
+
|
|
75
|
+
## [0.1.2] - 2026-06-26
|
|
76
|
+
|
|
77
|
+
### 修复
|
|
78
|
+
|
|
79
|
+
- 修复 `SearchTable`、`ProTable` 内部模板 ref 重名导致的 Vue 控制台警告（`Set operation on key "value" failed: target is readonly`）。
|
|
80
|
+
|
|
81
|
+
## [0.1.1] - 2026-06-25
|
|
82
|
+
|
|
83
|
+
### 修复
|
|
84
|
+
|
|
85
|
+
- 修复打包未排除外部依赖的问题：`vue`、`element-plus`、`axios`、`lodash-es`、`@amaoaaaaa/v-text-ellipsis` 等不再被打入产物。
|
|
86
|
+
- 修复 `RenderFormatterResult` 组件使用 `v-html` 产生的警告。
|
|
87
|
+
|
|
88
|
+
### 构建
|
|
89
|
+
|
|
90
|
+
- 新增 `build:analyze` 脚本，接入 `rollup-plugin-visualizer` 输出打包体积分析报告（`stats.html`）。
|
|
91
|
+
|
|
92
|
+
## [0.1.0-beta.1] - 2026-06-17
|
|
93
|
+
|
|
94
|
+
### 新增
|
|
95
|
+
|
|
96
|
+
- 首个版本：从完整项目中抽离 `SearchTable`、`ProTable` 组件及配套工具（`SelectionStore`、`useTableSort`、`useDelayedRef`、`parseErrorReason`）。
|
|
97
|
+
- 支持搜索、分页（按容器高度自动计算每页条数）、列排序、列筛选（单选 / 多选 / 时间范围）、跨页勾选、单元格内联编辑。
|
|
98
|
+
|
|
99
|
+
### 变更
|
|
100
|
+
|
|
101
|
+
- 移除自动导入机制，组件与函数改为显式导入。
|
|
102
|
+
- `element-plus` peer 依赖升级到 `^2.14.2`，`TableRow` 等类型对齐 element-plus 的类型定义。
|
|
103
|
+
|
|
104
|
+
[0.5.0]: https://github.com/amaoaaaaa/search-table/compare/537f3a9...92abeaa
|
|
105
|
+
[0.4.0]: https://github.com/amaoaaaaa/search-table/compare/fc99483...537f3a9
|
|
106
|
+
[0.3.0]: https://github.com/amaoaaaaa/search-table/compare/5d11cd0...fc99483
|
|
107
|
+
[0.2.3]: https://github.com/amaoaaaaa/search-table/compare/850550f...5d11cd0
|
|
108
|
+
[0.2.2]: https://github.com/amaoaaaaa/search-table/compare/ee2d0e7...850550f
|
|
109
|
+
[0.2.1]: https://github.com/amaoaaaaa/search-table/compare/70af915...ee2d0e7
|
|
110
|
+
[0.2.0]: https://github.com/amaoaaaaa/search-table/compare/9ac5fe0...70af915
|
|
111
|
+
[0.1.3]: https://github.com/amaoaaaaa/search-table/compare/30633b8...9ac5fe0
|
|
112
|
+
[0.1.2]: https://github.com/amaoaaaaa/search-table/compare/c989b33...30633b8
|
|
113
|
+
[0.1.1]: https://github.com/amaoaaaaa/search-table/compare/e544019...c989b33
|
|
114
|
+
[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' },
|
|
@@ -103,37 +104,126 @@ const columns = [{ label: '姓名', prop: 'name' }];
|
|
|
103
104
|
|
|
104
105
|
### SearchTable Props
|
|
105
106
|
|
|
106
|
-
| 属性 | 类型 | 默认值 | 说明
|
|
107
|
-
| ------------------------ | ------------------------------------ | ------------------ |
|
|
108
|
-
| `columns` | `ProTableColumn[]` | - | 表格列配置
|
|
109
|
-
| `fetchFn` | `SearchTableFetchFn` | **必填** | 数据请求函数
|
|
110
|
-
| `showSearch` | `boolean` | `true` | 是否显示搜索区域
|
|
111
|
-
| `searchInputPlaceholder` | `string` | `"输入搜索关键词"` | 搜索框占位文本
|
|
112
|
-
| `
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
107
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
108
|
+
| ------------------------ | ------------------------------------ | ------------------ | ------------------------------ |
|
|
109
|
+
| `columns` | `ProTableColumn[]` | - | 表格列配置 |
|
|
110
|
+
| `fetchFn` | `SearchTableFetchFn` | **必填** | 数据请求函数 |
|
|
111
|
+
| `showSearch` | `boolean` | `true` | 是否显示搜索区域 |
|
|
112
|
+
| `searchInputPlaceholder` | `string` | `"输入搜索关键词"` | 搜索框占位文本 |
|
|
113
|
+
| `searchButtonText` | `string` | `"搜索"` | 搜索按钮文字（优先于全局配置） |
|
|
114
|
+
| `searchField` | `string` | `"search"` | 搜索框绑定到查询参数的字段名 |
|
|
115
|
+
| `showAddButton` | `boolean` | `false` | 是否显示新增按钮 |
|
|
116
|
+
| `showBatchDeleteButton` | `boolean` | `false` | 是否显示批量删除按钮 |
|
|
117
|
+
| `pageSize` | `number` | 自动计算 | 每页条数 |
|
|
118
|
+
| `elPaginationProps` | `SearchTablePaginationProps` | - | 分页组件视觉配置（见下方说明） |
|
|
119
|
+
| `defaultSort` | `SortState` | - | 默认排序 |
|
|
120
|
+
| `selectable` | `boolean \| (row, index) => boolean` | - | 是否可勾选 |
|
|
121
|
+
| `searchParamsHandler` | `(params) => params` | - | 搜索参数处理函数 |
|
|
120
122
|
|
|
121
123
|
### SearchTable Events
|
|
122
124
|
|
|
123
|
-
| 事件名 | 参数
|
|
124
|
-
| -------------- |
|
|
125
|
-
| `add` | -
|
|
126
|
-
| `batch-delete` | `rows:
|
|
127
|
-
| `cell-edit` | `CellEditPayload
|
|
125
|
+
| 事件名 | 参数 | 说明 |
|
|
126
|
+
| -------------- | -------------------- | ---------------- |
|
|
127
|
+
| `add` | - | 点击新增按钮 |
|
|
128
|
+
| `batch-delete` | `rows: T[]` | 点击批量删除按钮 |
|
|
129
|
+
| `cell-edit` | `CellEditPayload<T>` | 单元格编辑完成 |
|
|
128
130
|
|
|
129
131
|
### SearchTable Expose
|
|
130
132
|
|
|
131
|
-
| 方法/属性 | 类型
|
|
132
|
-
| ------------------ |
|
|
133
|
-
| `refresh` | `() => Promise<void>`
|
|
134
|
-
| `selectedRows` | `
|
|
135
|
-
| `getSelectionRows` | `() =>
|
|
136
|
-
| `selectRows` | `(rows:
|
|
133
|
+
| 方法/属性 | 类型 | 说明 |
|
|
134
|
+
| ------------------ | --------------------- | -------------- |
|
|
135
|
+
| `refresh` | `() => Promise<void>` | 刷新当前页 |
|
|
136
|
+
| `selectedRows` | `T[]` | 已勾选的行 |
|
|
137
|
+
| `getSelectionRows` | `() => T[]` | 获取已勾选的行 |
|
|
138
|
+
| `selectRows` | `(rows: T[]) => void` | 勾选指定行 |
|
|
139
|
+
|
|
140
|
+
`selectedRows` 暴露的是 ref，但读取时会自动解包，所以拿到的是数组本身。
|
|
141
|
+
|
|
142
|
+
### 行数据类型（泛型组件）
|
|
143
|
+
|
|
144
|
+
`SearchTable` 是泛型组件，行数据类型 `T` 由 `columns` 与 `fetchFn` 推断，并会一路带到插槽 props、事件参数和暴露的实例方法上：
|
|
145
|
+
|
|
146
|
+
```vue
|
|
147
|
+
<template>
|
|
148
|
+
<SearchTable ref="searchTableRef" :columns="columns" :fetch-fn="fetchFn">
|
|
149
|
+
<!-- data 会被推断为 User[] -->
|
|
150
|
+
<template #table="{ data }">{{ data[0]?.name }}</template>
|
|
151
|
+
</SearchTable>
|
|
152
|
+
</template>
|
|
153
|
+
|
|
154
|
+
<script setup lang="ts">
|
|
155
|
+
import { useTemplateRef } from 'vue';
|
|
156
|
+
import type { ProTableColumn, SearchTableFetchFn } from '@amaoaaaaa/search-table';
|
|
157
|
+
|
|
158
|
+
interface User {
|
|
159
|
+
id: number;
|
|
160
|
+
name: string;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
const columns: ProTableColumn<User>[] = [{ prop: 'name', label: '姓名' }];
|
|
164
|
+
const fetchFn: SearchTableFetchFn<User> = async () => ({ data: [], totalCount: 0 });
|
|
165
|
+
|
|
166
|
+
const searchTableRef = useTemplateRef('searchTableRef');
|
|
167
|
+
</script>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
`columns` / `fetchFn` 建议显式标注类型（如 `ProTableColumn<User>[]`、`SearchTableFetchFn<User>`），这样 `T` 才能被准确推断。
|
|
171
|
+
|
|
172
|
+
> `InstanceType<typeof SearchTable>` 对泛型组件不生效（会报 `does not satisfy the constraint 'abstract new (...args: any) => any'`），需要实例类型时用 `useTemplateRef('ref')`（类型最完整），或导出的 `SearchTableInstance<T>`：
|
|
173
|
+
>
|
|
174
|
+
> ```ts
|
|
175
|
+
> import { ref } from 'vue';
|
|
176
|
+
> import type { SearchTableInstance } from '@amaoaaaaa/search-table';
|
|
177
|
+
>
|
|
178
|
+
> const searchTableRef = ref<SearchTableInstance<User>>();
|
|
179
|
+
> ```
|
|
180
|
+
|
|
181
|
+
### SearchTable Slots
|
|
182
|
+
|
|
183
|
+
| 插槽名 | 插槽 props | 说明 |
|
|
184
|
+
| ------------- | ------------------- | --------------------------------------------------------- |
|
|
185
|
+
| `search-form` | `{ query, search }` | 搜索框右侧的更多搜索条件，`search` 表示重置到第一页并请求 |
|
|
186
|
+
| `top-center` | - | 顶部区域中间内容 |
|
|
187
|
+
| `btns` | - | 操作区追加按钮（排在新增 / 批量删除之后） |
|
|
188
|
+
| `table` | 见下方 | 替换默认的表格渲染，不传时渲染内置 `ProTable` |
|
|
189
|
+
|
|
190
|
+
#### `table` 插槽
|
|
191
|
+
|
|
192
|
+
用于把默认的 `ProTable` 换成自定义表格（如卡片列表、其它表格组件），插槽 props 与传给 `ProTable` 的绑定保持一致：
|
|
193
|
+
|
|
194
|
+
| 名称 | 类型 | 说明 |
|
|
195
|
+
| ----------------- | --------------------------------------- | --------------------------------- |
|
|
196
|
+
| `data` | `T[]` | 当前页数据 |
|
|
197
|
+
| `loading` | `boolean` | 加载状态（延迟 100ms，避免闪烁） |
|
|
198
|
+
| `columns` | `ProTableColumn<T>[]` | 传入 `SearchTable` 的列配置 |
|
|
199
|
+
| `indexOffset` | `number` | 序号列的起始偏移量 |
|
|
200
|
+
| `defaultSort` | `{ prop, order }` | 默认排序（element-plus 排序顺序） |
|
|
201
|
+
| `applyFilter` | `(payload: ApplyFilterPayload) => void` | 应用列筛选条件 |
|
|
202
|
+
| `selectionChange` | `(rows: T[]) => void` | 勾选变化 |
|
|
203
|
+
| `cellEdit` | `(payload: CellEditPayload<T>) => void` | 单元格编辑完成 |
|
|
204
|
+
| `sortChange` | `(payload) => void` | 排序变化 |
|
|
205
|
+
|
|
206
|
+
其中 `T` 为行数据类型，见「行数据类型（泛型组件）」。
|
|
207
|
+
|
|
208
|
+
```vue
|
|
209
|
+
<template>
|
|
210
|
+
<SearchTable :columns="columns" :fetch-fn="fetchData">
|
|
211
|
+
<template #table="{ data, loading }">
|
|
212
|
+
<MyCardList
|
|
213
|
+
class="search-table__body flex-1 overflow-hidden"
|
|
214
|
+
:data="data"
|
|
215
|
+
:loading="loading"
|
|
216
|
+
/>
|
|
217
|
+
</template>
|
|
218
|
+
</SearchTable>
|
|
219
|
+
</template>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
使用 `table` 插槽时需要注意：
|
|
223
|
+
|
|
224
|
+
- 分页、搜索、筛选、排序仍由 `SearchTable` 管理（请求参数中的 `limit` / `offset` 也一样），插槽只负责表格区的渲染。
|
|
225
|
+
- 表格区的布局类（`search-table__body flex-1 overflow-hidden`）由使用方自己维护，默认的 `ProTable` 才有这些类名。
|
|
226
|
+
- 不再按容器高度自动计算每页条数：未显式传 `pageSize` 时使用默认值 `10`，并在控制台提示，需要其它条数请显式传入 `pageSize`。
|
|
137
227
|
|
|
138
228
|
### SearchTable 样式定制
|
|
139
229
|
|
|
@@ -151,32 +241,37 @@ const columns = [{ label: '姓名', prop: 'name' }];
|
|
|
151
241
|
</style>
|
|
152
242
|
```
|
|
153
243
|
|
|
154
|
-
| 类名 | 说明
|
|
155
|
-
| -------------------------------------- |
|
|
156
|
-
| `search-table` | 根容器
|
|
157
|
-
| `search-table__toolbar` | 顶部区域（搜索区 + 操作区）
|
|
158
|
-
| `search-table__search` | 左侧搜索组（搜索框 + 搜索表单 + 搜索按钮）
|
|
159
|
-
| `search-table__search-input` | 搜索输入框
|
|
160
|
-
| `search-table__search-button` | 搜索按钮
|
|
161
|
-
| `search-table__actions` | 右侧操作按钮组（新增 / 批量删除 / 插槽）
|
|
162
|
-
| `search-table__add-button` | 新增按钮
|
|
163
|
-
| `search-table__batch-delete-button` | 批量删除按钮
|
|
164
|
-
| `search-table__body` |
|
|
165
|
-
| `search-table__footer` | 底部分页区域
|
|
166
|
-
| `search-table__selection` | 已选条数提示区域
|
|
167
|
-
| `search-table__clear-selection-button` | 清空勾选按钮
|
|
168
|
-
| `search-table__pagination` | 分页组件
|
|
169
|
-
| `search-table__footer-spacer` | 分页区域右侧占位（用于保持分页居中）
|
|
244
|
+
| 类名 | 说明 |
|
|
245
|
+
| -------------------------------------- | --------------------------------------------------------------- |
|
|
246
|
+
| `search-table` | 根容器 |
|
|
247
|
+
| `search-table__toolbar` | 顶部区域（搜索区 + 操作区） |
|
|
248
|
+
| `search-table__search` | 左侧搜索组（搜索框 + 搜索表单 + 搜索按钮） |
|
|
249
|
+
| `search-table__search-input` | 搜索输入框 |
|
|
250
|
+
| `search-table__search-button` | 搜索按钮 |
|
|
251
|
+
| `search-table__actions` | 右侧操作按钮组（新增 / 批量删除 / 插槽） |
|
|
252
|
+
| `search-table__add-button` | 新增按钮 |
|
|
253
|
+
| `search-table__batch-delete-button` | 批量删除按钮 |
|
|
254
|
+
| `search-table__body` | 表格区域（默认为 ProTable 根节点，用 `table` 插槽时需自行添加） |
|
|
255
|
+
| `search-table__footer` | 底部分页区域 |
|
|
256
|
+
| `search-table__selection` | 已选条数提示区域 |
|
|
257
|
+
| `search-table__clear-selection-button` | 清空勾选按钮 |
|
|
258
|
+
| `search-table__pagination` | 分页组件 |
|
|
259
|
+
| `search-table__footer-spacer` | 分页区域右侧占位（用于保持分页居中） |
|
|
170
260
|
|
|
171
261
|
### SearchTableConfigProvider 全局配置
|
|
172
262
|
|
|
173
263
|
组件默认按 element-plus 表格的默认尺寸（表头 40px、每行 40px）计算每页条数。
|
|
174
264
|
如果业务中修改了表格样式，可用 `SearchTableConfigProvider` 统一覆盖，避免分页行数计算错误。
|
|
175
|
-
|
|
265
|
+
也可以在全局统一定制分页组件的视觉配置。该组件只提供配置、不渲染额外 DOM，用法类似 `ElConfigProvider`：
|
|
176
266
|
|
|
177
267
|
```vue
|
|
178
268
|
<template>
|
|
179
|
-
<SearchTableConfigProvider
|
|
269
|
+
<SearchTableConfigProvider
|
|
270
|
+
row-height="48"
|
|
271
|
+
header-height="56px"
|
|
272
|
+
:pagination-props="{ layout: 'total, prev, pager, next, jumper', pagerCount: 7 }"
|
|
273
|
+
:search-props="{ buttonText: '查询' }"
|
|
274
|
+
>
|
|
180
275
|
<SearchTable :columns="columns" :fetch-fn="fetchData" />
|
|
181
276
|
</SearchTableConfigProvider>
|
|
182
277
|
</template>
|
|
@@ -186,26 +281,80 @@ import { SearchTable, SearchTableConfigProvider } from '@amaoaaaaa/search-table'
|
|
|
186
281
|
</script>
|
|
187
282
|
```
|
|
188
283
|
|
|
189
|
-
| 属性
|
|
190
|
-
|
|
|
191
|
-
| `rowHeight`
|
|
192
|
-
| `headerHeight`
|
|
284
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
285
|
+
| ----------------- | ---------------------------- | ------------------------------------------------------------------------- | -------------------------------- |
|
|
286
|
+
| `rowHeight` | `number \| string` | `40` | 表格行高（px），用于计算每页条数 |
|
|
287
|
+
| `headerHeight` | `number \| string` | `40` | 表头高度（px），用于计算每页条数 |
|
|
288
|
+
| `paginationProps` | `SearchTablePaginationProps` | `{ background: true, layout: 'total, sizes, prev, pager, next, jumper' }` | 分页组件视觉配置 |
|
|
289
|
+
| `searchProps` | `SearchTableSearchProps` | `{ buttonText: '搜索' }` | 搜索区域配置 |
|
|
193
290
|
|
|
194
291
|
取值规则：
|
|
195
292
|
|
|
196
293
|
- 支持数字或字符串，字符串只提取前导数字并忽略单位：`48`、`'48'`、`'48px'`、`' 48.5px '` 均可用，`'3rem'` 会被当成 `3`（不做单位换算）。
|
|
197
294
|
- 解析结果四舍五入为整数：`'48.5px'` 为 `49`，`'48.4'` 为 `48`。
|
|
198
295
|
- 无法解析或非正数（如 `'abc'`、`''`、`0`、`Infinity`）会回退默认值 `40`。
|
|
296
|
+
- `layout` 与 element-plus 分页组件一致，可按需增减 `total`、`sizes`、`jumper` 等；传空字符串会回退默认布局。
|
|
297
|
+
- 分页配置的优先级：`elPaginationProps`（实例级）> `paginationProps`（全局）> 默认配置；值为 `undefined` 的字段不会覆盖低优先级的值。
|
|
298
|
+
- 搜索区域的配置统一放在 `searchProps` 对象里，当前支持 `buttonText`（搜索按钮文字），后续新增配置直接往对象里加字段即可；优先级：`searchButtonText`（实例级）> `searchProps.buttonText`（全局）> 默认值。
|
|
199
299
|
- 只影响未显式传入 `pageSize` 的实例；配置在实例挂载时读取一次，运行中修改 props 不会让已挂载实例重新计算。
|
|
200
300
|
|
|
301
|
+
`SearchTablePaginationProps` 是从 element-plus `PaginationProps` 中 Pick 出来的子集，保证与 `el-pagination` 类型一致，支持以下字段：
|
|
302
|
+
|
|
303
|
+
| 字段 | 说明 |
|
|
304
|
+
| ------------- | ------------------------------------- |
|
|
305
|
+
| `size` | 分页组件尺寸 |
|
|
306
|
+
| `background` | 是否为分页按钮添加背景色，默认 `true` |
|
|
307
|
+
| `pagerCount` | 页码按钮数量 |
|
|
308
|
+
| `layout` | 组件布局，各元素用逗号分隔 |
|
|
309
|
+
| `popperClass` | 每页条数下拉框的类名 |
|
|
310
|
+
| `popperStyle` | 每页条数下拉框的行内样式 |
|
|
311
|
+
| `prevText` | 替代上一页图标显示的文本 |
|
|
312
|
+
| `prevIcon` | 上一页图标 |
|
|
313
|
+
| `nextText` | 替代下一页图标显示的文本 |
|
|
314
|
+
| `nextIcon` | 下一页图标 |
|
|
315
|
+
|
|
316
|
+
`SearchTable` 的 `elPaginationProps` 与全局的 `paginationProps` 支持完全相同的字段，例如：
|
|
317
|
+
|
|
318
|
+
```vue
|
|
319
|
+
<SearchTable
|
|
320
|
+
:columns="columns"
|
|
321
|
+
:fetch-fn="fetchData"
|
|
322
|
+
:el-pagination-props="{ background: false, pagerCount: 5, prevText: '上一页' }"
|
|
323
|
+
/>
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
`SearchTableSearchProps` 目前支持以下字段，后续新增搜索区配置会继续往这个对象里加：
|
|
327
|
+
|
|
328
|
+
| 字段 | 说明 |
|
|
329
|
+
| ------------ | ------------------------------------------------------------- |
|
|
330
|
+
| `buttonText` | 搜索按钮文字，默认 `搜索`；实例级可用 `searchButtonText` 覆盖 |
|
|
331
|
+
|
|
201
332
|
## 导出清单
|
|
202
333
|
|
|
203
334
|
**组件：** `SearchTable`, `SearchTableConfigProvider`, `ProTable`
|
|
204
335
|
|
|
205
|
-
**类型：** `SearchTableProps`, `SearchTableFetchFn`, `PageParams`, `PageResp`, `SearchTableConfigProviderProps`, `ProTableProps`, `ProTableColumn`, `ProTableAction`, `TableRow`, `ApplyFilterPayload`, `CellEditPayload`, `SortState`, `ProTableInstance`
|
|
336
|
+
**类型：** `SearchTableProps`, `SearchTablePaginationProps`, `SearchTableSearchProps`, `SearchTableFetchFn`, `PageParams`, `PageResp`, `SearchTableConfigProviderProps`, `ProTableProps`, `ProTableColumn`, `ProTableAction`, `TableRow`, `ApplyFilterPayload`, `CellEditPayload`, `SortState`, `ProTableInstance`
|
|
206
337
|
|
|
207
338
|
**工具：** `SelectionStore`, `useTableSort`, `useDelayedRef`, `parseErrorReason`
|
|
208
339
|
|
|
340
|
+
## 更新日志
|
|
341
|
+
|
|
342
|
+
| 版本 | 日期 | 主要变更 |
|
|
343
|
+
| ------------ | ---------- | --------------------------------------------------------------- |
|
|
344
|
+
| 0.5.0 | 2026-10-13 | 表格区支持 `#table` 插槽替换；`SearchTable` 改为泛型组件 |
|
|
345
|
+
| 0.4.0 | 2026-09-30 | `SearchTableConfigProvider` 支持全局分页与搜索区域配置 |
|
|
346
|
+
| 0.3.0 | 2026-09-28 | 新增全局配置组件 `SearchTableConfigProvider`（行高 / 表头高度） |
|
|
347
|
+
| 0.2.3 | 2026-09-28 | 各区域补充可外部覆盖的 BEM 类名 |
|
|
348
|
+
| 0.2.2 | 2026-09-28 | 分页接口返回类型兼容更多可选属性 |
|
|
349
|
+
| 0.2.1 | 2026-08-10 | 补充仓库信息 |
|
|
350
|
+
| 0.2.0 | 2026-08-10 | 新增 `searchField`，支持自定义搜索框绑定的字段名 |
|
|
351
|
+
| 0.1.3 | 2026-06-29 | 重构类型导出，新增 `SearchTableInstance` 等类型 |
|
|
352
|
+
| 0.1.2 | 2026-06-26 | 修复模板 ref 重名引起的 Vue 控制台警告 |
|
|
353
|
+
| 0.1.1 | 2026-06-25 | 修复外部依赖未排除的打包问题 |
|
|
354
|
+
| 0.1.0-beta.1 | 2026-06-17 | 首个版本，从完整项目中抽离 SearchTable / ProTable |
|
|
355
|
+
|
|
356
|
+
完整变更记录见 [CHANGELOG.md](./CHANGELOG.md)。
|
|
357
|
+
|
|
209
358
|
## License
|
|
210
359
|
|
|
211
360
|
MIT
|
|
@@ -9,8 +9,10 @@ declare function __VLS_template(): {
|
|
|
9
9
|
};
|
|
10
10
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
11
11
|
declare const __VLS_component: import('vue').DefineComponent<SearchTableConfigProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SearchTableConfigProviderProps> & Readonly<{}>, {
|
|
12
|
+
paginationProps: import('./types').SearchTablePaginationProps;
|
|
12
13
|
rowHeight: number | string;
|
|
13
14
|
headerHeight: number | string;
|
|
15
|
+
searchProps: import('./types').SearchTableSearchProps;
|
|
14
16
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
15
17
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
16
18
|
export default _default;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { InjectionKey } from 'vue';
|
|
2
|
+
import { SearchTablePaginationProps, SearchTableSearchProps } from './types';
|
|
2
3
|
/**
|
|
3
4
|
* SearchTableConfigProvider 的配置项
|
|
4
5
|
*/
|
|
@@ -19,28 +20,60 @@ export interface SearchTableConfigProviderProps {
|
|
|
19
20
|
* @default 40
|
|
20
21
|
*/
|
|
21
22
|
headerHeight?: number | string;
|
|
23
|
+
/**
|
|
24
|
+
* 分页组件的视觉配置
|
|
25
|
+
*
|
|
26
|
+
* 从 element-plus 分页组件的 props 中 Pick 而来，会与 SearchTable 的
|
|
27
|
+
* `elPaginationProps` 合并，后者优先级更高
|
|
28
|
+
*
|
|
29
|
+
* @default { background: true, layout: 'total, sizes, prev, pager, next, jumper' }
|
|
30
|
+
*/
|
|
31
|
+
paginationProps?: SearchTablePaginationProps;
|
|
32
|
+
/**
|
|
33
|
+
* 搜索区域的配置
|
|
34
|
+
*
|
|
35
|
+
* 会被 SearchTable 上同名的实例配置覆盖
|
|
36
|
+
*
|
|
37
|
+
* @default { buttonText: '搜索' }
|
|
38
|
+
*/
|
|
39
|
+
searchProps?: SearchTableSearchProps;
|
|
22
40
|
}
|
|
23
41
|
/**
|
|
24
|
-
*
|
|
42
|
+
* 解析后的组件配置
|
|
25
43
|
*/
|
|
26
|
-
export interface
|
|
44
|
+
export interface SearchTableConfig {
|
|
27
45
|
/** 表格行高，正整数 */
|
|
28
46
|
rowHeight: number;
|
|
29
47
|
/** 表头高度，正整数 */
|
|
30
48
|
headerHeight: number;
|
|
49
|
+
/** 分页组件的视觉配置 */
|
|
50
|
+
paginationProps: SearchTablePaginationProps;
|
|
51
|
+
/** 解析后的搜索区域配置 */
|
|
52
|
+
searchProps: Required<SearchTableSearchProps>;
|
|
31
53
|
}
|
|
32
54
|
/**
|
|
33
|
-
*
|
|
55
|
+
* 默认配置，高度与 element-plus 表格默认样式保持一致
|
|
56
|
+
*/
|
|
57
|
+
export declare const DEFAULT_SEARCH_TABLE_CONFIG: SearchTableConfig;
|
|
58
|
+
/**
|
|
59
|
+
* 合并分页配置
|
|
60
|
+
*
|
|
61
|
+
* @description
|
|
62
|
+
* 越靠后的配置优先级越高；值为 `undefined` 的键视为未传入，
|
|
63
|
+
* 避免某个来源只声明了部分配置时把已有值覆盖掉。
|
|
64
|
+
*
|
|
65
|
+
* @param sources 按优先级从低到高排列的分页配置
|
|
66
|
+
* @returns 合并后的分页配置
|
|
34
67
|
*/
|
|
35
|
-
export declare
|
|
68
|
+
export declare function mergePaginationProps(...sources: Array<SearchTablePaginationProps | undefined>): SearchTablePaginationProps;
|
|
36
69
|
/**
|
|
37
|
-
*
|
|
70
|
+
* 解析组件配置
|
|
38
71
|
*
|
|
39
72
|
* @param config 原始配置
|
|
40
|
-
* @returns
|
|
73
|
+
* @returns 解析后的配置
|
|
41
74
|
*/
|
|
42
|
-
export declare function
|
|
75
|
+
export declare function resolveSearchTableConfig(config?: SearchTableConfigProviderProps): SearchTableConfig;
|
|
43
76
|
/**
|
|
44
|
-
*
|
|
77
|
+
* 组件配置的注入 key，由 SearchTableConfigProvider 提供、SearchTable 读取
|
|
45
78
|
*/
|
|
46
|
-
export declare const searchTableConfigKey: InjectionKey<
|
|
79
|
+
export declare const searchTableConfigKey: InjectionKey<SearchTableConfig>;
|
|
@@ -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
|
+
}
|