element-plus-suite 0.0.5 → 0.0.6
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 +147 -213
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,214 +1,148 @@
|
|
|
1
|
-
# Element Plus Suite
|
|
2
|
-
|
|
3
|
-
Element Plus Suite 是基于 Element Plus 二次封装的组件库，开箱即用。可以显著地提升制作 CRUD 页面的效率，轻松搬砖。
|
|
4
|
-
|
|
5
|
-
[文档](https://th74100.github.io/element-plus-suite/) · [GitHub](https://github.com/th74100/element-plus-suite)
|
|
6
|
-
|
|
7
|
-
## 特性
|
|
8
|
-
|
|
9
|
-
- **🚀 高效开发**：提供常用业务组件，减少重复代码
|
|
10
|
-
- **🎯 灵活配置**：支持 JSON 配置式和模板式，满足不同场景需求
|
|
11
|
-
- **💪 TypeScript**：提供完整的类型定义，更好的开发体验
|
|
12
|
-
- **🔥 Element Plus**：基于 Element Plus，支持主题定制
|
|
13
|
-
|
|
14
|
-
## 环境要求
|
|
15
|
-
|
|
16
|
-
- Vue 3.2 或更高版本
|
|
17
|
-
- Element Plus 2.0 或更高版本
|
|
18
|
-
- 支持 ESM 的现代构建工具
|
|
19
|
-
|
|
20
|
-
## 安装
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npm install element-plus-suite
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## 注册组件
|
|
27
|
-
|
|
28
|
-
如果项目已经全局注册 Element Plus，可以直接注册组件库：
|
|
29
|
-
|
|
30
|
-
```ts
|
|
31
|
-
import { createApp } from 'vue'
|
|
32
|
-
import ElementPlusSuite from 'element-plus-suite'
|
|
33
|
-
import App from './App.vue'
|
|
34
|
-
|
|
35
|
-
const app = createApp(App)
|
|
36
|
-
|
|
37
|
-
app.use(ElementPlusSuite)
|
|
38
|
-
app.mount('#app')
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
如果需要一起注册 Element Plus：
|
|
42
|
-
|
|
43
|
-
```ts
|
|
44
|
-
import { createApp } from 'vue'
|
|
45
|
-
import ElementPlus from 'element-plus'
|
|
46
|
-
import 'element-plus/dist/index.css'
|
|
47
|
-
import ElementPlusSuite from 'element-plus-suite'
|
|
48
|
-
import 'element-plus-suite/dist/index.css'
|
|
49
|
-
import App from './App.vue'
|
|
50
|
-
|
|
51
|
-
const app = createApp(App)
|
|
52
|
-
|
|
53
|
-
app.use(ElementPlus)
|
|
54
|
-
app.use(ElementPlusSuite)
|
|
55
|
-
app.mount('#app')
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
也可以按需导入：
|
|
59
|
-
|
|
60
|
-
```ts
|
|
61
|
-
import { ElTablePro } from 'element-plus-suite'
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
## 快速开始
|
|
65
|
-
|
|
66
|
-
```vue
|
|
67
|
-
<script setup lang="ts">
|
|
68
|
-
import { ElTablePro, type TableProColumn } from 'element-plus-suite'
|
|
69
|
-
|
|
70
|
-
interface User {
|
|
71
|
-
id: number
|
|
72
|
-
name: string
|
|
73
|
-
email: string
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
const columns: TableProColumn<User>[] = [
|
|
77
|
-
{ prop: 'name', label: '姓名', minWidth: 140 },
|
|
78
|
-
{ prop: 'email', label: '邮箱', minWidth: 220 },
|
|
79
|
-
]
|
|
80
|
-
|
|
81
|
-
const dataSource: User[] = [
|
|
82
|
-
{ id: 1, name: '林晓', email: 'linxiao@example.com' },
|
|
83
|
-
{ id: 2, name: '陈默', email: 'chenmo@example.com' },
|
|
84
|
-
]
|
|
85
|
-
</script>
|
|
86
|
-
|
|
87
|
-
<template>
|
|
88
|
-
<ElTablePro
|
|
89
|
-
:columns="columns"
|
|
90
|
-
:data="dataSource"
|
|
91
|
-
row-key="id"
|
|
92
|
-
:pagination="false"
|
|
93
|
-
/>
|
|
94
|
-
</template>
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
1
|
+
# Element Plus Suite
|
|
2
|
+
|
|
3
|
+
Element Plus Suite 是基于 Element Plus 二次封装的组件库，开箱即用。可以显著地提升制作 CRUD 页面的效率，轻松搬砖。
|
|
4
|
+
|
|
5
|
+
[文档](https://th74100.github.io/element-plus-suite/) · [GitHub](https://github.com/th74100/element-plus-suite)
|
|
6
|
+
|
|
7
|
+
## 特性
|
|
8
|
+
|
|
9
|
+
- **🚀 高效开发**：提供常用业务组件，减少重复代码
|
|
10
|
+
- **🎯 灵活配置**：支持 JSON 配置式和模板式，满足不同场景需求
|
|
11
|
+
- **💪 TypeScript**：提供完整的类型定义，更好的开发体验
|
|
12
|
+
- **🔥 Element Plus**：基于 Element Plus，支持主题定制
|
|
13
|
+
|
|
14
|
+
## 环境要求
|
|
15
|
+
|
|
16
|
+
- Vue 3.2 或更高版本
|
|
17
|
+
- Element Plus 2.0 或更高版本
|
|
18
|
+
- 支持 ESM 的现代构建工具
|
|
19
|
+
|
|
20
|
+
## 安装
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install element-plus-suite
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 注册组件
|
|
27
|
+
|
|
28
|
+
如果项目已经全局注册 Element Plus，可以直接注册组件库：
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
import { createApp } from 'vue'
|
|
32
|
+
import ElementPlusSuite from 'element-plus-suite'
|
|
33
|
+
import App from './App.vue'
|
|
34
|
+
|
|
35
|
+
const app = createApp(App)
|
|
36
|
+
|
|
37
|
+
app.use(ElementPlusSuite)
|
|
38
|
+
app.mount('#app')
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
如果需要一起注册 Element Plus：
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
import { createApp } from 'vue'
|
|
45
|
+
import ElementPlus from 'element-plus'
|
|
46
|
+
import 'element-plus/dist/index.css'
|
|
47
|
+
import ElementPlusSuite from 'element-plus-suite'
|
|
48
|
+
import 'element-plus-suite/dist/index.css'
|
|
49
|
+
import App from './App.vue'
|
|
50
|
+
|
|
51
|
+
const app = createApp(App)
|
|
52
|
+
|
|
53
|
+
app.use(ElementPlus)
|
|
54
|
+
app.use(ElementPlusSuite)
|
|
55
|
+
app.mount('#app')
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
也可以按需导入：
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import { ElFormPro, ElTablePro } from 'element-plus-suite'
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## 快速开始
|
|
65
|
+
|
|
66
|
+
```vue
|
|
67
|
+
<script setup lang="ts">
|
|
68
|
+
import { ElTablePro, type TableProColumn } from 'element-plus-suite'
|
|
69
|
+
|
|
70
|
+
interface User {
|
|
71
|
+
id: number
|
|
72
|
+
name: string
|
|
73
|
+
email: string
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
const columns: TableProColumn<User>[] = [
|
|
77
|
+
{ prop: 'name', label: '姓名', minWidth: 140 },
|
|
78
|
+
{ prop: 'email', label: '邮箱', minWidth: 220 },
|
|
79
|
+
]
|
|
80
|
+
|
|
81
|
+
const dataSource: User[] = [
|
|
82
|
+
{ id: 1, name: '林晓', email: 'linxiao@example.com' },
|
|
83
|
+
{ id: 2, name: '陈默', email: 'chenmo@example.com' },
|
|
84
|
+
]
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<template>
|
|
88
|
+
<ElTablePro
|
|
89
|
+
:columns="columns"
|
|
90
|
+
:data="dataSource"
|
|
91
|
+
row-key="id"
|
|
92
|
+
:pagination="false"
|
|
93
|
+
/>
|
|
94
|
+
</template>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
更多用法请查看[文档](https://th74100.github.io/element-plus-suite/components/table-pro/)
|
|
98
|
+
|
|
99
|
+
## ElFormPro
|
|
100
|
+
|
|
101
|
+
`ElFormPro` 是基于 schema 的 Element Plus 表单组件：
|
|
102
|
+
|
|
103
|
+
```vue
|
|
104
|
+
<script setup lang="ts">
|
|
105
|
+
import { ElFormPro, type FormProSchemaItem } from 'element-plus-suite'
|
|
106
|
+
|
|
107
|
+
const schema: FormProSchemaItem[] = [
|
|
108
|
+
{
|
|
109
|
+
key: 'keyword',
|
|
110
|
+
label: '关键词',
|
|
111
|
+
defaultValue: '',
|
|
112
|
+
col: { span: 8 },
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
key: 'status',
|
|
116
|
+
label: '状态',
|
|
117
|
+
type: 'select',
|
|
118
|
+
defaultValue: 'active',
|
|
119
|
+
col: { span: 8 },
|
|
120
|
+
fieldProps: {
|
|
121
|
+
options: [
|
|
122
|
+
{ name: '启用', id: 'active' },
|
|
123
|
+
{ name: '停用', id: 'disabled' },
|
|
124
|
+
],
|
|
125
|
+
props: {
|
|
126
|
+
label: 'name',
|
|
127
|
+
value: 'id',
|
|
128
|
+
},
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
]
|
|
132
|
+
</script>
|
|
133
|
+
|
|
134
|
+
<template>
|
|
135
|
+
<ElFormPro
|
|
136
|
+
:schema="schema"
|
|
137
|
+
:form-config="{
|
|
138
|
+
labelWidth: 120,
|
|
139
|
+
}"
|
|
140
|
+
/>
|
|
141
|
+
</template>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
更多用法请查看[文档](https://th74100.github.io/element-plus-suite/components/form-pro/)
|
|
145
|
+
|
|
146
|
+
## License
|
|
147
|
+
|
|
129
148
|
MIT
|
|
130
|
-
## ElFormPro
|
|
131
|
-
|
|
132
|
-
`ElFormPro` 是基于 schema 的 Element Plus 表单组件：
|
|
133
|
-
|
|
134
|
-
```vue
|
|
135
|
-
<script setup lang="ts">
|
|
136
|
-
import { ref } from 'vue'
|
|
137
|
-
import { ElFormPro, type FormProSchemaItem } from 'element-plus-suite'
|
|
138
|
-
|
|
139
|
-
const formData = ref({
|
|
140
|
-
keyword: '',
|
|
141
|
-
status: '',
|
|
142
|
-
})
|
|
143
|
-
|
|
144
|
-
const schema: FormProSchemaItem[] = [
|
|
145
|
-
{ key: 'keyword', label: '关键词', type: 'input', col: { span: 8 } },
|
|
146
|
-
{
|
|
147
|
-
key: 'status',
|
|
148
|
-
label: '状态',
|
|
149
|
-
type: 'select',
|
|
150
|
-
col: { span: 8 },
|
|
151
|
-
fieldProps: {
|
|
152
|
-
options: [
|
|
153
|
-
{ name: '启用', id: 'active' },
|
|
154
|
-
{ name: '停用', id: 'disabled' },
|
|
155
|
-
],
|
|
156
|
-
props: {
|
|
157
|
-
label: 'name',
|
|
158
|
-
value: 'id',
|
|
159
|
-
},
|
|
160
|
-
},
|
|
161
|
-
},
|
|
162
|
-
]
|
|
163
|
-
</script>
|
|
164
|
-
|
|
165
|
-
<template>
|
|
166
|
-
<ElFormPro v-model="formData" :schema="schema" />
|
|
167
|
-
</template>
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
## 高级筛选
|
|
171
|
-
|
|
172
|
-
`ElTablePro` 可以通过 `filter` 组合 `ElFormPro`：
|
|
173
|
-
|
|
174
|
-
```vue
|
|
175
|
-
<ElTablePro
|
|
176
|
-
:columns="columns"
|
|
177
|
-
:request="requestUsers"
|
|
178
|
-
:filter="{
|
|
179
|
-
schema: filterSchema,
|
|
180
|
-
model: filters,
|
|
181
|
-
formConfig: {
|
|
182
|
-
showCollapseButton: true,
|
|
183
|
-
collapseRows: 1,
|
|
184
|
-
},
|
|
185
|
-
}"
|
|
186
|
-
row-key="id"
|
|
187
|
-
/>
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
筛选草稿与已应用条件分离。点击查询后才应用条件并回到第一页；切换分页时继续使用已应用条件。
|
|
191
|
-
|
|
192
|
-
`request` 会收到统一参数：
|
|
193
|
-
|
|
194
|
-
```ts
|
|
195
|
-
const requestUsers: TableProRequest<User, UserQuery> = async ({
|
|
196
|
-
page,
|
|
197
|
-
pageSize,
|
|
198
|
-
query,
|
|
199
|
-
signal,
|
|
200
|
-
}) => {
|
|
201
|
-
const params = new URLSearchParams({
|
|
202
|
-
page: String(page ?? 1),
|
|
203
|
-
pageSize: String(pageSize ?? 20),
|
|
204
|
-
keyword: query.keyword,
|
|
205
|
-
})
|
|
206
|
-
const response = await fetch(`/api/users?${params}`, { signal })
|
|
207
|
-
const payload = await response.json()
|
|
208
|
-
|
|
209
|
-
return {
|
|
210
|
-
data: payload.list,
|
|
211
|
-
total: payload.total,
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
```
|