@zl-ui-kit/components 0.18.2 → 0.18.4
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 +124 -77
- package/dist/components/ZlCardPage/index.vue.d.ts +40 -2
- package/dist/components/ZlCardPage/index.vue.mjs +36 -34
- package/dist/components/ZlDescription/index.css +1 -1
- package/dist/components/ZlDescription/index.vue.mjs +28 -24
- package/dist/components/ZlForm/index.css +1 -1
- package/dist/components/ZlForm/index.vue.d.ts +7 -0
- package/dist/components/ZlForm/index.vue.mjs +50 -47
- package/dist/components/ZlLayoutSwitch/index.css +1 -1
- package/dist/components/ZlLayoutSwitch/index.vue.d.ts +10 -0
- package/dist/components/ZlLayoutSwitch/index.vue.mjs +1 -1
- package/dist/components/ZlLayoutSwitch/index2.vue.mjs +27 -19
- package/dist/components/ZlSearch/index.vue.d.ts +25 -0
- package/dist/components/ZlSearch/index.vue.mjs +62 -59
- package/dist/components/ZlSearchTable/index.vue.d.ts +40 -2
- package/dist/components/ZlSearchTable/index.vue.mjs +19 -17
- package/dist/locales/en.mjs +2 -2
- package/dist/locales/zh-cn.mjs +2 -2
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -863,6 +863,11 @@ const { data } = useDataRequest(getChartDataApi, { dataKey: 'data' })
|
|
|
863
863
|
|
|
864
864
|
#### ① `ZlSearchTable` —— 直接传 service
|
|
865
865
|
|
|
866
|
+
> **内置分页驱动，不要过度包装**：组件内部已用 `usePageableRequest` 完成 loading / 分页 / 查询参数合并 / 刷新，
|
|
867
|
+
> `request` **直接传一个纯分页 service**（`(params) => api.page(params)`，返回 `{ rows, total }` 结构）即可，**不需要**在页面里再包一层 `usePageableRequest` / `useRequest` 管理数据。
|
|
868
|
+
> 需要重查时用 `ref.refresh()`（原地重查、保持页码）；查询条件变化、增删改后需回第 1 页时，把变化源放进 `request.options.refreshDeps`（见下）。
|
|
869
|
+
> 完整页面范式见 [`§6.5.1`](#651-列表页范式zlsearchtable--usepageablerequest内置) 与 playground `ZlSearchTable` / `ZlCardPage` 示例。
|
|
870
|
+
|
|
866
871
|
```vue
|
|
867
872
|
<ZlSearchTable
|
|
868
873
|
:request="getResourcePage"
|
|
@@ -905,8 +910,29 @@ const queryItems: SearchItem[] = [
|
|
|
905
910
|
]
|
|
906
911
|
```
|
|
907
912
|
|
|
913
|
+
**查询项不显示 label（不占位）**：与 `ZlForm` 一致，传 `:hide-empty-label="true"` 并把该项 `label` 置为 `''`，
|
|
914
|
+
该项不渲染 label 列、查询控件直接顶到最左（其余查询项不受影响），适合「检索项名称与本页标题重复」等场景：
|
|
915
|
+
|
|
916
|
+
```vue
|
|
917
|
+
<ZlSearchTable :request="getResourcePage" :columns="columns" :query-items="queryItems" hide-empty-label />
|
|
918
|
+
```
|
|
919
|
+
|
|
920
|
+
```ts
|
|
921
|
+
const queryItems: SearchItem[] = [
|
|
922
|
+
// 该项无 label：配合 hide-empty-label 不占位
|
|
923
|
+
{ model: 'keyword', label: '', component: 'el-input', props: { placeholder: '直接顶到最左' } },
|
|
924
|
+
// 其余项照常带 label
|
|
925
|
+
{ model: 'type', label: '类型', component: 'el-select', props: {/* … */} },
|
|
926
|
+
]
|
|
927
|
+
```
|
|
928
|
+
|
|
929
|
+
> `ZlSearch` / `ZlSearchTable` / `ZlCardPage` 三个组件都透传 `hideEmptyLabel` prop，behavior 一致。
|
|
930
|
+
|
|
908
931
|
#### ② `ZlCardPage` —— 直接传 service
|
|
909
932
|
|
|
933
|
+
> **与 `ZlSearchTable` 同源：内置 `usePageableRequest` 驱动卡片分页，`request` 直接传纯分页 service 即可**，不要在外层再用 `usePageableRequest` 包装。
|
|
934
|
+
> 增删改成功后用 `cardPageRef.value?.refresh()` 原地重查；需要主表格/卡片之外自行管理 loading 时（罕见）才考虑手动包一层。
|
|
935
|
+
|
|
910
936
|
```vue
|
|
911
937
|
<ZlCardPage :request="getResourcePage" card-min-width="200px">
|
|
912
938
|
<template #default="{ data }">
|
|
@@ -1198,7 +1224,8 @@ req.cancel() // 取消进行中请求
|
|
|
1198
1224
|
|
|
1199
1225
|
#### 6.5.1 列表页范式：ZlSearchTable + usePageableRequest（内置）
|
|
1200
1226
|
|
|
1201
|
-
`ZlSearchTable` 内部已用 `usePageableRequest`
|
|
1227
|
+
`ZlSearchTable` 内部已用 `usePageableRequest` 驱动分页与查询，**页面只需把纯分页 service 直接传给 `request`，不要在外层再包 `usePageableRequest` 管理数据**；
|
|
1228
|
+
新增、导入、导出等按钮统一放进 `search-actions` 插槽；行内操作交给列的 `actions`；字典列与超长列用同名插槽（`#<prop>`）接管；增删改成功后用 `tableRef.value?.refresh()` 原地重查。
|
|
1202
1229
|
|
|
1203
1230
|
```vue
|
|
1204
1231
|
<script setup lang="ts">
|
|
@@ -1484,6 +1511,17 @@ const items: FormItem[] = [
|
|
|
1484
1511
|
|
|
1485
1512
|
> `rules` 必须写在 `formItemProps` 里：item 上除上述字段外的键会被当作**控件 props** 透传给控件，写错不会报错、但校验不生效。
|
|
1486
1513
|
|
|
1514
|
+
**表单项不显示 label（不占位）**：给组件传 `:hide-empty-label="true"`，并把该项 `label` 置为空字符串 `''`——
|
|
1515
|
+
该项将**不渲染 label 列**、控件直接顶到最左（其余有 label 的项不受影响）。适合检索栏里「筛选项与本页标题重复」等不需要 label 的场景：
|
|
1516
|
+
|
|
1517
|
+
```vue
|
|
1518
|
+
<ZlForm :model="form" :items="items" label-width="auto" hide-empty-label>
|
|
1519
|
+
<!-- items 中含 { model: 'keyword', label: '', component: 'el-input', ... } 的项即无 label 占位 -->
|
|
1520
|
+
</ZlForm>
|
|
1521
|
+
```
|
|
1522
|
+
|
|
1523
|
+
> `hide-empty-label` 只对 `label` 为空的项生效；`ZlSearch` / `ZlSearchTable` / `ZlCardPage` 均透传同名单该 prop（用于其 `items` / `queryItems`）。
|
|
1524
|
+
|
|
1487
1525
|
### ZlSearch —— 查询条
|
|
1488
1526
|
|
|
1489
1527
|
`items: SearchItem[]`，与 `ZlForm` 的 `items` **同一套 schema**：基础查询项直接 `component` + `props` 配置（不用写模板），
|
|
@@ -3790,7 +3828,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3790
3828
|
| [`ZlAvatar`](#zlavatar) | 主入口 | 3 | 0 | 0 | 0 |
|
|
3791
3829
|
| [`ZlAvatarGroup`](#zlavatargroup) | 主入口 | 3 | 0 | 0 | 0 |
|
|
3792
3830
|
| [`ZlCard`](#zlcard) | 主入口 | 3 | 0 | 8 | 0 |
|
|
3793
|
-
| [`ZlCardPage`](#zlcardpage) | 主入口 |
|
|
3831
|
+
| [`ZlCardPage`](#zlcardpage) | 主入口 | 7 | 1 | 3 | 3 |
|
|
3794
3832
|
| [`ZlCheckAll`](#zlcheckall) | 主入口 | 2 | 1 | 0 | 0 |
|
|
3795
3833
|
| [`ZlCheckboxTag`](#zlcheckboxtag) | 主入口 | 7 | 1 | 1 | 0 |
|
|
3796
3834
|
| [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
|
|
@@ -3803,7 +3841,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3803
3841
|
| [`ZlLogin`](#zllogin) | 主入口 | 2 | 0 | 2 | 0 |
|
|
3804
3842
|
| [`ZlLoginForm`](#zlloginform) | 主入口 | 1 | 0 | 1 | 0 |
|
|
3805
3843
|
| [`ZlEmpty`](#zlempty) | 主入口 | 2 | 0 | 0 | 0 |
|
|
3806
|
-
| [`ZlForm`](#zlform) | 主入口 |
|
|
3844
|
+
| [`ZlForm`](#zlform) | 主入口 | 3 | 0 | 3 | 9 |
|
|
3807
3845
|
| [`ZlFormChild`](#zlformchild) | 主入口 | 1 | 0 | 0 | 0 |
|
|
3808
3846
|
| [`ZlGridItem`](#zlgriditem) | 主入口 | 1 | 0 | 1 | 0 |
|
|
3809
3847
|
| [`ZlGrid`](#zlgrid) | 主入口 | 9 | 0 | 2 | 0 |
|
|
@@ -3813,14 +3851,14 @@ const { i18n } = useLocale({ messages })
|
|
|
3813
3851
|
| [`ZlIconHover`](#zliconhover) | 主入口 | 0 | 0 | 0 | 0 |
|
|
3814
3852
|
| [`ZlIconLabel`](#zliconlabel) | 主入口 | 1 | 1 | 1 | 0 |
|
|
3815
3853
|
| [`ZlCornerTag`](#zlcornertag) | 主入口 | 5 | 0 | 1 | 0 |
|
|
3816
|
-
| [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 |
|
|
3854
|
+
| [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 6 | 1 | 0 | 0 |
|
|
3817
3855
|
| [`ZlPageContainer`](#zlpagecontainer) | 主入口 | 3 | 0 | 4 | 0 |
|
|
3818
3856
|
| [`ZlPagination`](#zlpagination) | 主入口 | 4 | 3 | 0 | 0 |
|
|
3819
3857
|
| [`ZlPermission`](#zlpermission) | 主入口 | 1 | 0 | 1 | 0 |
|
|
3820
3858
|
| [`ZlPopconfirm`](#zlpopconfirm) | 主入口 | 4 | 2 | 3 | 0 |
|
|
3821
3859
|
| [`ZlRadioTag`](#zlradiotag) | 主入口 | 3 | 1 | 1 | 0 |
|
|
3822
|
-
| [`ZlSearch`](#zlsearch) | 主入口 |
|
|
3823
|
-
| [`ZlSearchTable`](#zlsearchtable) | 主入口 |
|
|
3860
|
+
| [`ZlSearch`](#zlsearch) | 主入口 | 7 | 2 | 2 | 3 |
|
|
3861
|
+
| [`ZlSearchTable`](#zlsearchtable) | 主入口 | 6 | 1 | 3 | 4 |
|
|
3824
3862
|
| [`ZlSection`](#zlsection) | 主入口 | 4 | 0 | 3 | 0 |
|
|
3825
3863
|
| [`ZlSorter`](#zlsorter) | 主入口 | 2 | 2 | 1 | 0 |
|
|
3826
3864
|
| [`ZlSorterList`](#zlsorterlist) | 主入口 | 2 | 1 | 0 | 0 |
|
|
@@ -4239,7 +4277,7 @@ import { ZlCard } from '@zl-ui-kit/components'
|
|
|
4239
4277
|
|
|
4240
4278
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlCardPage/index.vue`</sub>
|
|
4241
4279
|
|
|
4242
|
-
**接口概览**：
|
|
4280
|
+
**接口概览**：7 props · 1 事件 · 3 插槽 · 3 暴露
|
|
4243
4281
|
|
|
4244
4282
|
**用法示例**
|
|
4245
4283
|
|
|
@@ -4249,7 +4287,7 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
4249
4287
|
</script>
|
|
4250
4288
|
|
|
4251
4289
|
<template>
|
|
4252
|
-
<ZlCardPage :request="mockPageRequest" card-min-width="200px" :query-items="queryItems" />
|
|
4290
|
+
<ZlCardPage :request="mockPageRequest" card-min-width="200px" hide-empty-label :query-items="queryItems" />
|
|
4253
4291
|
</template>
|
|
4254
4292
|
```
|
|
4255
4293
|
|
|
@@ -4269,14 +4307,15 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
4269
4307
|
|
|
4270
4308
|
**props**
|
|
4271
4309
|
|
|
4272
|
-
| 属性
|
|
4273
|
-
|
|
|
4274
|
-
| `immediate`
|
|
4275
|
-
| `request`
|
|
4276
|
-
| `queryItems`
|
|
4277
|
-
| `
|
|
4278
|
-
| `
|
|
4279
|
-
| `
|
|
4310
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4311
|
+
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4312
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 无查询条件时是否立即发起首次请求 |
|
|
4313
|
+
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> } \| UseRequestInstance` | — | 是 | `:request="async () => {}"` | 请求来源，三种形态任一： 1. 请求函数 `(...args) => Promise` 2. `{ service, options }` 对象（ZlCardPage 内部再包一层 usePageableRequest） 3. `useRequest` / `usePageableRequest` 实例（消费方自行创建，便于接管 loading/refresh） |
|
|
4314
|
+
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` | 搜索表单项配置，为空则不渲染搜索栏 |
|
|
4315
|
+
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 搜索项 label 为空时是否不渲染 label 占位，透传给 ZlSearch / ZlForm 的 hideEmptyLabel |
|
|
4316
|
+
| `pagination` | `Record<string, any> \| boolean` | `true` | 否 | `:pagination="{}"` | 分页配置，false 关闭分页，对象则透传 |
|
|
4317
|
+
| `itemKey` | `string` | `'id'` | 否 | `item-key="id"` | 卡片数据的唯一键字段名，默认 id |
|
|
4318
|
+
| `cardMinWidth` | `string` | — | 否 | `card-min-width="280px"` | 卡片最小宽度，决定单行能放几列 |
|
|
4280
4319
|
|
|
4281
4320
|
**事件（emits）**
|
|
4282
4321
|
|
|
@@ -4444,7 +4483,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
4444
4483
|
</script>
|
|
4445
4484
|
|
|
4446
4485
|
<template>
|
|
4447
|
-
<ZlDescription :items="items" :data="
|
|
4486
|
+
<ZlDescription :items="items" :data="data" secondary />
|
|
4448
4487
|
</template>
|
|
4449
4488
|
```
|
|
4450
4489
|
|
|
@@ -4817,7 +4856,7 @@ import { ZlEmpty } from '@zl-ui-kit/components'
|
|
|
4817
4856
|
|
|
4818
4857
|
**简介**：表单：`items` schema 驱动，控件由 `component`/`props` 描述； 单字段可用 `#<model>` 插槽整块接管，未声明的入参与事件透传给 `el-form`
|
|
4819
4858
|
|
|
4820
|
-
**接口概览**：
|
|
4859
|
+
**接口概览**：3 props · 3 插槽 · 9 暴露
|
|
4821
4860
|
|
|
4822
4861
|
**用法示例**
|
|
4823
4862
|
|
|
@@ -4847,10 +4886,11 @@ import { ZlForm } from '@zl-ui-kit/components'
|
|
|
4847
4886
|
|
|
4848
4887
|
**props**
|
|
4849
4888
|
|
|
4850
|
-
| 属性
|
|
4851
|
-
|
|
|
4852
|
-
| `items`
|
|
4853
|
-
| `model`
|
|
4889
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4890
|
+
| ---------------- | --------------------- | ---------- | ---- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4891
|
+
| `items` | `FormItem[]` | `() => []` | 否 | `:items="items"` | 表单字段 schema，决定渲染哪些表单项 |
|
|
4892
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单值对象，不传时由组件内部自建 |
|
|
4893
|
+
| `hideEmptyLabel` | `boolean` | — | 否 | `hide-empty-label` | 表单项 `label` 为空字符串/缺省时不渲染 label 占位（控件直接顶到最左）。 默认 false：即使 label 为空，EP 也会因 #label 插槽存在而保留 label 列占位 |
|
|
4854
4894
|
|
|
4855
4895
|
> 暴露对象是 `Proxy`：下表为显式实现的能力，**未列出的键会运行时下钻到内部实例**（不建议依赖，请用上表的实例 getter 取原生对象）
|
|
4856
4896
|
> 把 `$attrs` 透传给 `el-form`，未列出的属性会继续下传
|
|
@@ -5248,7 +5288,7 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
|
|
|
5248
5288
|
|
|
5249
5289
|
**简介**：布局切换：在网格视图（grid）与表格视图（table）之间切换
|
|
5250
5290
|
|
|
5251
|
-
**接口概览**：
|
|
5291
|
+
**接口概览**：6 props · 1 事件
|
|
5252
5292
|
|
|
5253
5293
|
**用法示例**
|
|
5254
5294
|
|
|
@@ -5264,10 +5304,14 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
5264
5304
|
|
|
5265
5305
|
**props**
|
|
5266
5306
|
|
|
5267
|
-
| 属性 | 类型 | 默认值
|
|
5268
|
-
| ------------ | ------------------- |
|
|
5269
|
-
| `modelValue` | `'grid' \| 'table'` | —
|
|
5270
|
-
| `value` | `'grid' \| 'table'` | `'grid'`
|
|
5307
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5308
|
+
| ------------ | ------------------- | -------------- | ---- | ------------------------- | --------------------------------------------------------- |
|
|
5309
|
+
| `modelValue` | `'grid' \| 'table'` | — | 否 | `v-model="value"` | 当前布局，`v-model` 绑定；未绑定时回落 `value` |
|
|
5310
|
+
| `value` | `'grid' \| 'table'` | `'grid'` | 否 | `value="grid"` | 已废弃，请用 `modelValue`；仅在未双向绑定时作为当前布局 |
|
|
5311
|
+
| `gridText` | `string` | — | 否 | `grid-text="grid-text"` | 网格按钮文案：缺省走 i18n（卡片），传空字符串则只显示图标 |
|
|
5312
|
+
| `tableText` | `string` | — | 否 | `table-text="table-text"` | 表格按钮文案：缺省走 i18n（列表），传空字符串则只显示图标 |
|
|
5313
|
+
| `gridIcon` | `string` | `'table'` | 否 | `grid-icon="grid-icon"` | 网格按钮图标（`zl:` 图标名，不带前缀）：缺省 `table` |
|
|
5314
|
+
| `tableIcon` | `string` | `'list-color'` | 否 | `table-icon="table-icon"` | 列表按钮图标（`zl:` 图标名，不带前缀）：缺省 `list-color` |
|
|
5271
5315
|
|
|
5272
5316
|
**事件（emits）**
|
|
5273
5317
|
|
|
@@ -5524,7 +5568,7 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
5524
5568
|
|
|
5525
5569
|
**简介**：查询条：表单项按容器宽度自适应排列（auto-fill 网格），放不下的项自动隐藏， 并在「查询」左侧给出展开按钮（点击后在查询条上层展开全量表单，再点收起）。
|
|
5526
5570
|
|
|
5527
|
-
**接口概览**：
|
|
5571
|
+
**接口概览**：7 props · 2 事件 · 2 插槽 · 3 暴露
|
|
5528
5572
|
|
|
5529
5573
|
**用法示例**
|
|
5530
5574
|
|
|
@@ -5534,7 +5578,7 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
5534
5578
|
</script>
|
|
5535
5579
|
|
|
5536
5580
|
<template>
|
|
5537
|
-
<ZlSearch :items="items" />
|
|
5581
|
+
<ZlSearch hide-empty-label :items="items" />
|
|
5538
5582
|
</template>
|
|
5539
5583
|
```
|
|
5540
5584
|
|
|
@@ -5553,14 +5597,15 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
5553
5597
|
|
|
5554
5598
|
**props**
|
|
5555
5599
|
|
|
5556
|
-
| 属性
|
|
5557
|
-
|
|
|
5558
|
-
| `items`
|
|
5559
|
-
| `model`
|
|
5560
|
-
| `immediate`
|
|
5561
|
-
| `disabled`
|
|
5562
|
-
| `labelsVisible`
|
|
5563
|
-
| `
|
|
5600
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5601
|
+
| ---------------- | --------------------- | ----------- | ---- | -------------------- | -------------------------------------------------------------------------------------------- |
|
|
5602
|
+
| `items` | `SearchItem[]` | `() => []` | 否 | `:items="items"` | 查询项定义（SearchItem[]），按数组顺序排列 |
|
|
5603
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单数据。传入时组件直接读写该对象（受控）； 不传则用内部副本，`params` / 标签行仍可正常工作 |
|
|
5604
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即执行一次查询（默认 true） |
|
|
5605
|
+
| `disabled` | `boolean` | `false` | 否 | `disabled` | 禁用全部查询项 |
|
|
5606
|
+
| `labelsVisible` | `boolean` | `undefined` | 否 | `labels-visible` | 是否展示「筛选条件」标签行；不传时按「是否发生溢出」自动判定 |
|
|
5607
|
+
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 表单项 label 为空时是否不渲染 label 占位，透传给 ZlForm 的 hideEmptyLabel |
|
|
5608
|
+
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` | 已废弃，请用 `labelsVisible` |
|
|
5564
5609
|
|
|
5565
5610
|
**事件（emits）**
|
|
5566
5611
|
|
|
@@ -5588,7 +5633,7 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
5588
5633
|
|
|
5589
5634
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlSearchTable/index.vue`</sub>
|
|
5590
5635
|
|
|
5591
|
-
**接口概览**：
|
|
5636
|
+
**接口概览**：6 props · 1 事件 · 3 插槽 · 4 暴露
|
|
5592
5637
|
|
|
5593
5638
|
**用法示例**
|
|
5594
5639
|
|
|
@@ -5601,6 +5646,7 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
5601
5646
|
<ZlSearchTable
|
|
5602
5647
|
:request="mockPageRequest"
|
|
5603
5648
|
:columns="columns"
|
|
5649
|
+
hide-empty-label
|
|
5604
5650
|
:query-items="queryItems"
|
|
5605
5651
|
:pagination="{ pageSize: 5 }"
|
|
5606
5652
|
height="340"
|
|
@@ -5624,13 +5670,14 @@ import { ZlSearchTable } from '@zl-ui-kit/components'
|
|
|
5624
5670
|
|
|
5625
5671
|
**props**
|
|
5626
5672
|
|
|
5627
|
-
| 属性
|
|
5628
|
-
|
|
|
5629
|
-
| `immediate`
|
|
5630
|
-
| `request`
|
|
5631
|
-
| `columns`
|
|
5632
|
-
| `queryItems`
|
|
5633
|
-
| `pagination`
|
|
5673
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5674
|
+
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | ------------------------------------------------------------------------------------ |
|
|
5675
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即请求首屏数据，默认 true |
|
|
5676
|
+
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> }` | — | 是 | `:request="async () => {}"` | 请求函数，或 { service, options }（usePageableRequest options） |
|
|
5677
|
+
| `columns` | `TableColumn[]` | `() => []` | 否 | `:columns="columns"` | 表格列定义，决定有哪些列及其渲染方式 |
|
|
5678
|
+
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` | 查询区的表单项；为空且不传 search-actions 插槽时不渲染查询条 |
|
|
5679
|
+
| `pagination` | `Record<string, any> \| boolean` | — | 否 | `:pagination="{}"` | 分页配置；传 false 关闭分页 |
|
|
5680
|
+
| `hideEmptyLabel` | `boolean` | `false` | 否 | `hide-empty-label` | 查询项 label 为空时是否不渲染 label 占位，透传给 ZlSearch / ZlForm 的 hideEmptyLabel |
|
|
5634
5681
|
|
|
5635
5682
|
> 把 `$attrs` 透传给 `ZlTable`，未列出的属性会继续下传
|
|
5636
5683
|
|
|
@@ -6748,8 +6795,8 @@ ZlGrid 子项 schema
|
|
|
6748
6795
|
### 15.1 核心替换规则
|
|
6749
6796
|
|
|
6750
6797
|
1. **接口请求统一封装**：所有接口调用使用 `useRequest`（普通接口）与 `usePageableRequest`（列表 / 分页接口）替换裸 `axios` / `fetch`。详见 §6。
|
|
6751
|
-
2. **普通（分页）列表页**：用 `ZlSearchTable` 替换 `el-table
|
|
6752
|
-
3. **卡片（分页）列表页**：用 `ZlCardPage` 替换 `el-table
|
|
6798
|
+
2. **普通（分页）列表页**：用 `ZlSearchTable` 替换 `el-table`。**组件内部已内置 `usePageableRequest` 驱动**（loading / 分页 / 查询参数合并 / 刷新），`request` 直接传纯分页 service 即可，**不要在外层再包一层分页请求**；增删改成功后用 `ref.refresh()` 原地重查。
|
|
6799
|
+
3. **卡片（分页）列表页**：用 `ZlCardPage` 替换 `el-table`。同样内置 `usePageableRequest`，用法与 `ZlSearchTable` 完全一致——直传 service + `ref.refresh()`，不要重复包装。
|
|
6753
6800
|
4. **弹窗**：所有弹窗（`el-dialog` 等）**默认统一用 `ZlDrawer` 替换**——仅当明确需要居中 / 模态对话框形态时才用 `ZlDialog`；**未明确指定用 `ZlDialog` 的场景，一律默认替换成 `ZlDrawer`**。按弹窗内展示内容的多少合理排版（表单用 `ZlForm`、详情用描述列表等）。
|
|
6754
6801
|
5. **表单**：所有新增、编辑、详情弹窗里的表单项（`el-form`）都用 `ZlForm` 替换。
|
|
6755
6802
|
6. **卡片**：卡片列表的卡片组件用 `ZlCard` 替换。
|
|
@@ -6765,36 +6812,36 @@ ZlGrid 子项 schema
|
|
|
6765
6812
|
|
|
6766
6813
|
### 15.2 常用 el-* → Zl-* 对照表（持续补充）
|
|
6767
6814
|
|
|
6768
|
-
| Element Plus 组件 | 替换为 | 说明
|
|
6769
|
-
| ------------------------------------------------- | -------------------- |
|
|
6770
|
-
| `el-table`（普通 / 分页列表） | `ZlSearchTable` | 自带查询条、分页、loading
|
|
6771
|
-
| `el-table`（卡片分页列表） | `ZlCardPage` |
|
|
6772
|
-
| `el-table`（纯表格，无查询） | `ZlTable` | 普通表格展示
|
|
6773
|
-
| `el-dialog` / `el-drawer` | `ZlDrawer` | 所有弹窗统一为抽屉
|
|
6774
|
-
| `el-form` | `ZlForm` | 弹窗内新增 / 编辑 / 详情表单（schema 驱动）
|
|
6775
|
-
| `el-card` | `ZlCard` | 卡片容器
|
|
6776
|
-
| `el-button`（操作栏 / 卡片内） | `ZlAction` | 操作列与卡片按钮；页面级独立按钮仍可用 `el-button`
|
|
6777
|
-
| `el-tooltip`（超长省略） | `ZlAutoTooltip` | 文字溢出时自动提示
|
|
6778
|
-
| `el-icon` | `ZlIcon` | 需先注册图标集（§4.1）
|
|
6779
|
-
| `el-tree` | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法见 §7 › ZlTree
|
|
6780
|
-
| `el-upload` | `ZlUpload` |
|
|
6781
|
-
| `el-tag` | `ZlTag` |
|
|
6782
|
-
| `el-tabs` | `ZlTabs` | 页签内容默认懒挂载，差异见 §15.5
|
|
6783
|
-
| `el-radio`（标签式） | `ZlRadioTag` | 仅此形态封装
|
|
6784
|
-
| `el-checkbox`（标签式） | `ZlCheckboxTag` | 仅此形态封装
|
|
6785
|
-
| `el-checkbox`（全选 / 半选） | `ZlCheckAll` | 自带半选态，可替代表头全选勾选框
|
|
6786
|
-
| `el-radio` / `el-checkbox`（普通单选框 / 复选框） | —（**有意不封装**） | 继续用 `el-*`，库内无对应物（见 §15.5）
|
|
6787
|
-
| `el-radio-group` / `el-checkbox-group` | —（**有意不封装**） | 继续用 `el-*`，组内选项自行渲染
|
|
6788
|
-
| `el-switch` | `ZlSwitch` |
|
|
6789
|
-
| `el-popconfirm` | `ZlPopconfirm` |
|
|
6790
|
-
| `el-empty` | `ZlEmpty` |
|
|
6791
|
-
| `el-avatar` | `ZlAvatar` |
|
|
6792
|
-
| `el-descriptions` | `ZlDescription` |
|
|
6793
|
-
| `el-text` | `ZlText` |
|
|
6794
|
-
| `el-pagination` | `ZlPagination` |
|
|
6795
|
-
| `el-select`（树形） | `ZlTreeSelect` |
|
|
6796
|
-
| `ElMessage` / `ElNotification`（提示消息） | `useGlobalMessage()` | 非组件，用 hook 取 `Message` / `Notification` 实例（§12.1.4）
|
|
6797
|
-
| `ElMessageBox`（确认框） | `useGlobalMessage()` | 取 `Modal`（扩展 `confirmPromise`），二次确认 + 异步操作统一在这里
|
|
6815
|
+
| Element Plus 组件 | 替换为 | 说明 |
|
|
6816
|
+
| ------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
|
6817
|
+
| `el-table`（普通 / 分页列表） | `ZlSearchTable` | 自带查询条、分页、loading（内部 `usePageableRequest` 驱动，直传 service + `ref.refresh()`） |
|
|
6818
|
+
| `el-table`（卡片分页列表） | `ZlCardPage` | 卡片式分页列表（同上，内置分页驱动） |
|
|
6819
|
+
| `el-table`（纯表格，无查询） | `ZlTable` | 普通表格展示 |
|
|
6820
|
+
| `el-dialog` / `el-drawer` | `ZlDrawer` | 所有弹窗统一为抽屉 |
|
|
6821
|
+
| `el-form` | `ZlForm` | 弹窗内新增 / 编辑 / 详情表单（schema 驱动） |
|
|
6822
|
+
| `el-card` | `ZlCard` | 卡片容器 |
|
|
6823
|
+
| `el-button`（操作栏 / 卡片内） | `ZlAction` | 操作列与卡片按钮；页面级独立按钮仍可用 `el-button` |
|
|
6824
|
+
| `el-tooltip`（超长省略） | `ZlAutoTooltip` | 文字溢出时自动提示 |
|
|
6825
|
+
| `el-icon` | `ZlIcon` | 需先注册图标集（§4.1） |
|
|
6826
|
+
| `el-tree` | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法见 §7 › ZlTree |
|
|
6827
|
+
| `el-upload` | `ZlUpload` | |
|
|
6828
|
+
| `el-tag` | `ZlTag` | |
|
|
6829
|
+
| `el-tabs` | `ZlTabs` | 页签内容默认懒挂载，差异见 §15.5 |
|
|
6830
|
+
| `el-radio`（标签式） | `ZlRadioTag` | 仅此形态封装 |
|
|
6831
|
+
| `el-checkbox`（标签式） | `ZlCheckboxTag` | 仅此形态封装 |
|
|
6832
|
+
| `el-checkbox`（全选 / 半选） | `ZlCheckAll` | 自带半选态，可替代表头全选勾选框 |
|
|
6833
|
+
| `el-radio` / `el-checkbox`（普通单选框 / 复选框） | —（**有意不封装**） | 继续用 `el-*`，库内无对应物（见 §15.5） |
|
|
6834
|
+
| `el-radio-group` / `el-checkbox-group` | —（**有意不封装**） | 继续用 `el-*`，组内选项自行渲染 |
|
|
6835
|
+
| `el-switch` | `ZlSwitch` | |
|
|
6836
|
+
| `el-popconfirm` | `ZlPopconfirm` | |
|
|
6837
|
+
| `el-empty` | `ZlEmpty` | |
|
|
6838
|
+
| `el-avatar` | `ZlAvatar` | |
|
|
6839
|
+
| `el-descriptions` | `ZlDescription` | |
|
|
6840
|
+
| `el-text` | `ZlText` | |
|
|
6841
|
+
| `el-pagination` | `ZlPagination` | |
|
|
6842
|
+
| `el-select`（树形） | `ZlTreeSelect` | |
|
|
6843
|
+
| `ElMessage` / `ElNotification`（提示消息） | `useGlobalMessage()` | 非组件，用 hook 取 `Message` / `Notification` 实例（§12.1.4） |
|
|
6844
|
+
| `ElMessageBox`（确认框） | `useGlobalMessage()` | 取 `Modal`（扩展 `confirmPromise`），二次确认 + 异步操作统一在这里 |
|
|
6798
6845
|
|
|
6799
6846
|
> 未在上表中的 `el-*` 组件，请对照 §3 组件总览的命名与用途选择对应 Zl 组件；若暂无对应实现，暂保留 `el-*`，并在本规范登记为待补充项。
|
|
6800
6847
|
> 替换前请先读 **[§15.5 迁移行为差异与透传契约](#155-迁移行为差异与透传契约必读)**：哪些属性默认直接透传、哪些行为与 EP 不等价。
|