ProFormDrawer 抽屉表单
ProFormDrawer 抽屉表单组件是在 ProForm 超级表单 和 ProDrawer 超级抽屉 的基础上进行拓展，因此完全兼容这些组件的所有 Props 配置、Emit 事件、Slots 插槽。
基础用法
vue
<script lang="ts" setup>
import type { ElFormProps, FormColumn } from "@/components/pro/form";
import { ref, computed } from "vue";
import { ProFormDrawer } from "@/components/pro/form-drawer";
const confirmLoading = ref(false);
const drawerVisible = ref(false);
const state = ref({ name: "名称" });
const elFormProps: Partial<ElFormProps> = {
rules: {
name: [{ required: true, message: "请输入名称" }],
},
};
const columns: FormColumn[] = [
{
label: "名称",
prop: "name",
tooltip: computed(() => (state.value.name as string) || "提示：复制名称"),
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
{ label: "是否显示", prop: "switch", el: "el-switch" },
{
label: "城市",
prop: "city",
el: "el-cascader",
options: [
{
value: "0",
label: "陕西",
children: [
{
value: "0-0",
label: "西安",
children: [
{ value: "0-0-0", label: "新城区" },
{ value: "0-0-1", label: "高新区" },
{ value: "0-0-2", label: "灞桥区" },
],
},
],
},
{
value: "1",
label: "山西",
children: [
{
value: "1-0",
label: "太原",
children: [
{ value: "1-0-0", label: "小店区" },
{ value: "1-0-1", label: "古交市" },
{ value: "1-0-2", label: "万柏林区" },
],
},
],
},
],
},
{
label: "要求",
prop: "demand",
el: "el-checkbox",
options: [
{ label: "四六级", value: "0" },
{ label: "计算机二级证书", value: "1" },
{ label: "普通话证书", value: "2" },
],
},
{
label: "梦想",
prop: "gift",
el: "el-radio",
options: [
{
label: "诗",
value: "0",
},
{
label: "远方",
value: "1",
},
{
label: "美食",
value: "2",
},
],
},
{
label: "到期时间",
prop: "endTime",
el: "el-date-picker",
elProps: {
type: "datetimerange",
startPlaceholder: "请选择开始时间",
endPlaceholder: "请选择结束时间",
},
},
{
label: "说明",
prop: "desc",
el: "el-input",
elProps: {
type: "textarea",
maxlength: 10,
showWordLimit: true,
autosize: { minRows: 2, maxRows: 4 },
},
},
];
const handleSubmit = () => {
confirmLoading.value = true;
setTimeout(() => {
confirmLoading.value = false;
drawerVisible.value = false;
}, 2000);
};
</script>
<template>
<div>
<el-button @click="drawerVisible = true">打开抽屉表单</el-button>
<ProFormDrawer
v-model:visible="drawerVisible"
v-model="state"
:drawer="{ title: '抽屉标题', confirmLoading }"
:form="{ elFormProps, columns }"
@confirm="handleSubmit"
/>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
隐藏源代码
自定义表单组件
使用 ProForm 的自定义表单组件插槽：render、jsx/tsx、slot。
vue
<script lang="tsx" setup>
import type { ElFormProps, FormColumn } from "@/components/pro/form";
import { ref, computed, h } from "vue";
import { ProFormDrawer } from "@/components/pro/form-drawer";
import { ElInput } from "element-plus";
const confirmLoading = ref(false);
const drawerVisible = ref(false);
const state = ref<Record<string, any>>({ name: "我是一个 h 函数渲染的 input", tag: "我是一个 tsx 渲染的标签" });
const elFormProps: Partial<ElFormProps> = {
rules: {
name: [{ required: true, message: "请输入名称" }],
tag: [{ required: true, message: "请输入标签" }],
},
};
const columns: FormColumn[] = [
{
label: "名称",
prop: "name",
tooltip: computed(() => (state.value.name as string) || "提示：复制名称"),
render: () => {
return h(ElInput);
},
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
{
label: "标签",
prop: "tag",
render: value => {
return <div style="color: green;">{value}</div>;
},
},
{ label: "是否显示", prop: "switch", el: "el-switch" },
{ label: "时间", prop: "time", el: "el-date-picker" },
{ label: "数量", prop: "number", el: "el-input-number", elProps: { precision: 2, step: 2 } },
];
const handleSubmit = () => {
confirmLoading.value = true;
setTimeout(() => {
confirmLoading.value = false;
drawerVisible.value = false;
}, 2000);
};
</script>
<template>
<div>
<el-button @click="drawerVisible = true">打开抽屉表单</el-button>
<ProFormDrawer
v-model:visible="drawerVisible"
v-model="state"
:drawer="{ title: '表单标题', confirmLoading }"
:form="{ elFormProps, columns }"
@confirm="handleSubmit"
>
<template #status>
<el-input v-model="state.status" type="textarea" placeholder="自定义输入框插槽" />
</template>
</ProFormDrawer>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
隐藏源代码
自定义表单 Label
使用 ProForm 的自定义表单 Label 插槽：render、jsx/tsx、slot。
vue
<script lang="tsx" setup>
import type { ElFormProps, FormColumn } from "@/components/pro/form";
import { ref, computed, h } from "vue";
import { ProFormDrawer } from "@/components/pro/form-drawer";
const confirmLoading = ref(false);
const drawerVisible = ref(false);
const state = ref<Record<string, any>>({
name: "我的 Label 由 h 函数渲染",
tag: "我的 Label 由 tsx 渲染",
});
const elFormProps: Partial<ElFormProps> = {
rules: {
name: [{ required: true, message: "请输入名称" }],
tag: [{ required: true, message: "请输入标签" }],
},
};
const columns: FormColumn[] = [
{
label: "名称",
prop: "name",
tooltip: computed(() => (state.value.name as string) || "提示：复制名称"),
renderLabel: value => {
return h("div", {}, value as string);
},
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
{
label: "标签",
prop: "tag",
renderLabel: label => {
return <div style="color: green;">{label}</div>;
},
},
{ label: "是否显示", prop: "switch", el: "el-switch" },
{ label: "时间", prop: "time", el: "el-date-picker" },
{ label: "数量", prop: "number", el: "el-input-number", elProps: { precision: 2, step: 2 } },
];
const handleSubmit = () => {
confirmLoading.value = true;
setTimeout(() => {
confirmLoading.value = false;
drawerVisible.value = false;
}, 2000);
};
</script>
<template>
<div>
<el-button @click="drawerVisible = true">打开抽屉表单</el-button>
<ProFormDrawer
v-model:visible="drawerVisible"
v-model="state"
:drawer="{ title: '表单标题', confirmLoading }"
:form="{ elFormProps, columns }"
@confirm="handleSubmit"
>
<template #status-label="{ label }">
<span style="color: red">{{ label }}</span>
</template>
</ProFormDrawer>
</div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
隐藏源代码
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 表单绑定值 | object | |
| drawer | ProDrawer 的 Props | object ProDrawer | |
| form | ProForm 的 Props | object ProForm |
Event
| 名称 | 说明 | 类型 |
|---|---|---|
| change | 表单值改变事件 | function |
| confirm | 确认按钮点击事件 | function |
| cancel | 确认按钮点击事件 | function |
Slots
| 插槽名 | 说明 | 作用域插槽参数 |
|---|---|---|
| ... | 其他扩展属性，支持所有 ProForm Slots 和 ProDrawer Slots | ... |
Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| proFormInstance | ProForm 实例 | object |
| handleConfirm | 确认按钮点击事件 | function |
| handleCancel | 取消按钮点击事件 | function |
| open | 打开抽屉 | function |
| close | 关闭抽屉 | function |