官网：http://www.form-create.com/v2/element-ui/
安装
1
| npm i @form-create/element-ui
|
引入
在 main.js 中导入并注册
功能演示
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
| <template>
<div>
<form-create
v-model="fApi"
:rule="rule"
:option="option"
:value.sync="value"
></form-create>
</div>
</template>
<script>
export default {
data() {
return {
fApi: {},
value: {},
rule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
option: {
onSubmit: (formData) => {
alert(JSON.stringify(formData))
}
}
}
}
}
</script>
|
通过配置项on监听事件
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
| <template>
<div>
<form-create
v-model="fApi"
:rule="rule"
:option="option"
:value.sync="value"
></form-create>
</div>
</template>
<script>
export default {
data() {
return {
fApi: {},
value: {},
rule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称',
on: {
input: (e) => {
console.log(e)
}
}
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
option: {
onSubmit: (formData) => {
alert(JSON.stringify(formData))
}
}
}
}
}
</script>
|
除了 input 方法，也可以写 change，blur 等方法
加载异步数据
类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| type fetch = string | {
//接口地址
action: String;
//异步数据插入的位置,例如:'options', 'props.options'
to?: String;
//解析接口返回的数据,返回最终数据. 默认取 `res.data`
parse?: (body: any, rule:Rule, fapi:fApi) => any;
//请求方式, 默认 GET
method?: String;
//调用接口附带数据
data?: Object;
//调用接口附带数据的提交方式,默认为 `formData`
dataType?: 'json';
//自定义 header 头信息
headers?: Object;
//接口请求失败回调
onError?: (e: Error | ProgressEvent) => void;
} | ((rule, api)=>Object)
|
加载 select 数据
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
| rule:[
{
type: 'select',
field: 'select_city',
title: '城市',
value: '',
options: [],
effect: {
fetch: {
action:
'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json',
to: 'options',
method: 'GET',
parse(res) {
return res.rows.map((row) => {
return {
label: row.name,
value: row.adcode
}
})
}
}
}
}
]
|
加载 cascader 数据
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
| rule:[
{
type: 'cascader',
field: 'cascader_city',
title: '省市',
value: [],
props: {
options: []
},
effect: {
fetch: {
action:
'https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China@2.4.0/dist/pc-code.json',
to: 'props.options',
method: 'GET',
parse(res) {
function tidy(list) {
return list.map((val) => {
return {
value: val.code,
label: val.name,
children: val.children ? tidy(val.children) : undefined
}
})
}
return tidy(res)
}
}
}
}
]
|
自定义布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| rule:[
{
type: 'input',
field: 'goodsName',
title: '商品名称',
on: ['input'],
col: {
span: 12
}
},
{
type: 'datePicker',
field: 'createdAt',
title: '创建时间',
col: {
span: 12
}
},
]
|
自定义校验
设置表单必填
1
2
3
4
5
6
7
8
| rule:[
{
type: 'input',
field: 'name',
title: '名称',
validate: [{ type: 'string', required: true, message: '请输入名称' }]
}
]
|
设置数字最小值10
1
2
3
4
5
6
7
8
| rule:[
{
type:'inputNumber',
field:'number',
title:'数字',
validate: [{type: 'number', min:10, required: true, message:'最小为10'}]
}
]
|
自定义提交按钮
1
2
3
4
5
6
7
8
9
10
11
12
|
option: {
submitBtn: {
innerText: '自定义按钮',
round: true,
type: 'success'
},
onSubmit: (formData) => {
alert(JSON.stringify(formData))
}
}
|
