@zl-ui-kit/components 0.14.2 → 0.14.3
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 +43 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -839,6 +839,49 @@ const onStatusChange = () => cardPageRef.value?.refresh()
|
|
|
839
839
|
> 两种刷新语义别混用:`refreshDeps` 变化**一律回第 1 页**(换条件后停在旧页码没有意义);
|
|
840
840
|
> 需要「原地重查、页码不变」(行内改状态、删除后刷新)用 `ref.refresh()` / `ref.search.search(params)`。
|
|
841
841
|
|
|
842
|
+
#### 分页属性:透传 `usePagination`
|
|
843
|
+
|
|
844
|
+
`ZlSearchTable` / `ZlCardPage` 的 `:pagination` 直接透传给 `usePagination`(`ZlCardPage` 在对象模式 `{ rows, total }` 下也会合并这些展示配置,不会丢弃)。常用属性:
|
|
845
|
+
|
|
846
|
+
| 属性 | 类型 | 默认 | 说明 |
|
|
847
|
+
| ----------------- | ---------- | ------------ | ----------------------------------------------------- |
|
|
848
|
+
| `pageSize` | `number` | `30` | 每页条数(同时作为请求入参 `pageSize`) |
|
|
849
|
+
| `pageSizeOptions` | `number[]` | `[10,30,50]` | 页容量下拉可选项(自动并入当前 `pageSize`) |
|
|
850
|
+
| `simple` | `boolean` | `true` | 简易分页:小尺寸 + 去掉跳页输入框;`false` 显示完整版 |
|
|
851
|
+
| `totalVisible` | `boolean` | `true` | 是否显示总数(`showTotal` 为已废弃别名) |
|
|
852
|
+
| `pageSizeVisible` | `boolean` | `true` | 是否显示页容量选择器(`showPageSize` 为已废弃别名) |
|
|
853
|
+
| `pageNum` | `number` | `1` | 初始当前页(一般交给组件内部管理,无需手动传) |
|
|
854
|
+
|
|
855
|
+
```vue
|
|
856
|
+
<!-- ZlSearchTable:简易分页 + 自定义页容量选项 + 隐藏页容量选择器 -->
|
|
857
|
+
<ZlSearchTable
|
|
858
|
+
:request="getResourcePage"
|
|
859
|
+
:columns="columns"
|
|
860
|
+
:query-items="queryItems"
|
|
861
|
+
:pagination="{
|
|
862
|
+
pageSize: 4,
|
|
863
|
+
pageSizeOptions: [4, 8, 12],
|
|
864
|
+
simple: true,
|
|
865
|
+
totalVisible: true,
|
|
866
|
+
pageSizeVisible: false,
|
|
867
|
+
}"
|
|
868
|
+
height="320"
|
|
869
|
+
/>
|
|
870
|
+
|
|
871
|
+
<!-- ZlCardPage:对象模式同样生效(simple / pageSize / pageSizeOptions / totalVisible) -->
|
|
872
|
+
<ZlCardPage
|
|
873
|
+
:request="getResourcePage"
|
|
874
|
+
card-min-width="200px"
|
|
875
|
+
:pagination="{ pageSize: 4, pageSizeOptions: [4, 8], simple: true, totalVisible: false }"
|
|
876
|
+
>
|
|
877
|
+
<template #default="{ data }">
|
|
878
|
+
<el-card>{{ data.name }}</el-card>
|
|
879
|
+
</template>
|
|
880
|
+
</ZlCardPage>
|
|
881
|
+
```
|
|
882
|
+
|
|
883
|
+
> `total` / `pageNum` / `pageSize` 的实际数值由接口返回(或数组长度)决定,`usePagination` 仅用它们渲染;上面的 `pageSize` 会作为请求入参下发,后端按此分页即可。
|
|
884
|
+
|
|
842
885
|
#### ③ `ZlTable` + `ZlPagination` —— 自行 `usePaginationRequest`
|
|
843
886
|
|
|
844
887
|
```ts
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库(Element Plus 体系,Zl 前缀)——首批:Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"file-type": "^20.4.1",
|
|
40
40
|
"dt-sql-parser": "^4.3.1",
|
|
41
41
|
"sql-formatter": "^15.4.2",
|
|
42
|
-
"@zl-ui-kit/composables": "0.14.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/composables": "0.14.3",
|
|
43
|
+
"@zl-ui-kit/utils": "0.14.3",
|
|
44
|
+
"@zl-ui-kit/icons": "0.14.3"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -98,10 +98,10 @@
|
|
|
98
98
|
"@vue-office/pdf": "^2.0.10",
|
|
99
99
|
"@vue-office/pptx": "1.0.1",
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
|
-
"@jichuang/tsconfig": "1.0.0",
|
|
102
101
|
"@jichuang/eslint-config": "1.0.0",
|
|
103
|
-
"@jichuang/
|
|
104
|
-
"@zl-ui-kit/theme": "0.14.
|
|
102
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
103
|
+
"@zl-ui-kit/theme": "0.14.3",
|
|
104
|
+
"@jichuang/vite-config": "1.0.0"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|