表单数据字典
... 2021-7-29 About 4 min
# 表单数据字典
Tips
//使用字典需要引入axios
import axios from "axios";
Vue.use(Avue, { axios });
//老版本需要使用如下
//main.js
window.axios = axios;
1
2
3
4
5
6
7
2
3
4
5
6
7
# 本地字典
Tips
2.13.0+ dicData 支持promise和function类型
注意返回的数据必须为array数组，返回数据中 value 类型和数据的类型必须要对应，比如都是字符串或者都是数字。
<avue-form v-model="form" :option="option"></avue-form>
<script>
export default {
data() {
return {
form: {
cascader: [0, 1],
tree: 1,
},
option: {
column: [
{
label: "array",
prop: "cascader",
type: "cascader",
dicData: [
{
label: "一级",
value: 0,
children: [
{
label: "一级1",
value: 1,
},
{
label: "一级2",
value: 2,
},
],
},
],
},
{
label: "function",
prop: "tree",
type: "tree",
dicData: (ele) => {
return [
{
label: "一级",
value: 0,
children: [
{
label: "一级1",
value: 1,
},
{
label: "一级2",
value: 2,
},
],
},
];
},
},
{
label: "promise",
prop: "select",
type: "select",
dicData: (ele) => {
return new Promise((resolve) => {
resolve([
{
label: "一级1",
value: 1,
},
{
label: "一级2",
value: 2,
},
]);
});
},
},
],
},
};
},
};
</script>
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
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
Expand Copy Copy
# 字段配置
配置props对应的label和value即可，字典返回的是无任何层级包裹的，如果有层级需要配置res字段
<avue-form v-model="form" :option="option"></avue-form>
<script>
export default {
data() {
return {
form: {
grade: 1,
},
option: {
column: [
{
label: "权限",
prop: "grade",
type: "select",
props: {
label: "name",
value: "code",
},
dicData: [
{
name: "有权限",
code: 1,
},
{
name: "无权限",
code: 0,
},
{
name: "禁止项",
code: -1,
},
],
},
{
label: "省份",
prop: "province",
type: "select",
props: {
label: "name",
value: "code",
res: "data.list",
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince?isRes=true`,
},
],
},
};
},
};
</script>
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
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
Expand Copy Copy
# 网络字典
网络字典不需要配置dicData属性，直接配置dicUrl字典接口即可，dicMethod指定请求类型,默认为 get 请求,dicQuery为请求携带的参数
<avue-form v-model="form" :option="option"></avue-form>
<script>
let baseUrl = "https://cli.avuejs.com/api/area";
export default {
data() {
return {
form: {
province: "110000",
city: "110000",
},
option: {
column: [
{
label: "get请求",
prop: "province",
type: "select",
props: {
label: "name",
value: "code",
},
dicUrl: `${baseUrl}/getProvince`,
},
{
label: "post请求",
prop: "city",
type: "tree",
dicMethod: "post",
props: {
label: "name",
value: "code",
},
dicUrl: `${baseUrl}/getProvince`,
},
],
},
};
},
};
</script>
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
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
Expand Copy Copy
# 字典格式化
dicFormatter为字典数据返回的执行函数，对字典处理完返回即可
<avue-form v-model="form" :option="option"></avue-form>
<script>
let baseUrl = "https://cli.avuejs.com/api/area";
export default {
data() {
return {
form: {
province: "110000",
},
option: {
column: [
{
label: "城市",
prop: "province",
type: "select",
props: {
label: "name",
value: "code",
},
dicFormatter: (data) => {
data.forEach((ele) => {
ele.name = ele.name + "字典格式化";
});
data.unshift({ name: "追加字典", code: -1 });
return data;
},
dicUrl: `${baseUrl}/getProvince`,
},
],
},
};
},
};
</script>
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
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
Expand Copy Copy
# 禁止字典某项
禁止的项目配置disabled为true
<avue-form v-model="form" :option="option"></avue-form>
<script>
export default {
data() {
return {
form: {
grade: 1,
},
option: {
column: [
{
label: "权限",
prop: "grade",
type: "select",
dicData: [
{
label: "有权限",
value: 1,
},
{
label: "无权限",
value: 0,
},
{
label: "禁止项",
disabled: true,
value: -1,
},
],
},
],
},
};
},
};
</script>
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
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
Expand Copy Copy
# 字典联动
Tips
2.9.0+
Tips
2.9.0 以下的老版本使用的属性是 cascaderItem
cascader为需要联动的子选择框prop值，填写多个就会形成一对多的关系,cascaderIndex设置默认选择第几项
<avue-form v-model="form" :option="option"></avue-form>
<script>
let baseUrl = "https://cli.avuejs.com/api/area";
export default {
data() {
return {
form: {
province: "110000",
city1: "110100",
city2: "110100",
area: "110101",
},
option: {
column: [
{
label: "省份",
prop: "province",
type: "select",
cascader: ["city1", "city2"],
cascaderIndex: 1,
props: {
label: "name",
value: "code",
},
dicUrl: `${baseUrl}/getProvince`,
},
{
width: 120,
label: "城市1",
prop: "city1",
type: "select",
cascader: ["area"],
cascaderIndex: 1,
cell: true,
props: {
label: "name",
value: "code",
},
dicUrl: `${baseUrl}/getCity/{{key}}`,
rules: [
{
required: true,
message: "请选择城市1",
trigger: "blur",
},
],
},
{
width: 120,
label: "城市2",
prop: "city2",
type: "select",
cascaderIndex: 2,
cell: true,
props: {
label: "name",
value: "code",
},
dicUrl: `${baseUrl}/getCity/{{key}}`,
rules: [
{
required: true,
message: "请选择城市2",
trigger: "blur",
},
],
},
{
width: 120,
label: "地区",
prop: "area",
cell: true,
props: {
label: "name",
value: "code",
},
type: "select",
dicUrl: `${baseUrl}/getArea/{{key}}?province={{province}}`,
rules: [
{
required: true,
message: "请选择地区",
trigger: "blur",
},
],
},
],
},
};
},
};
</script>
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
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
Expand Copy Copy
# 修改类型
调用内置方法findObject查找对应prop的属性序号 ,同时你也可以更新字典
<el-button type="primary" size="small" @click="updateOption">更改配置</el-button
><br /><br />
<avue-form ref="form" :option="option" v-model="form"></avue-form>
<script>
export default {
data() {
return {
form: {},
option: {
column: [
{
label: "字典",
prop: "checkbox",
span: 24,
type: "checkbox",
dicData: [
{
label: "单选字典1",
value: 1,
},
{
label: "单选字典0",
value: 2,
},
],
},
],
},
};
},
methods: {
updateOption() {
var column = this.findObject(this.option.column, "checkbox");
column.type = "radio";
column.dicData = [
{
label: "下拉框字典1",
value: 1,
},
{
label: "下拉框字典0",
value: 2,
},
];
},
},
};
</script>
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
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
Expand Copy Copy
# 修改数据
和上面方法一样，只是再调用updateDic时不需要传新的字典，他会自己调用dicUrl去请求字典
<el-button type="primary" size="small" @click="updateUrlDic">更新字典</el-button
><br /><br />
<avue-form ref="form" :option="option" v-model="form"></avue-form>
<script>
export default {
data() {
return {
form: {},
option: {
column: [
{
label: "字典",
span: 24,
type: "checkbox",
prop: "checkbox",
dicUrl: "https://cli.avuejs.com/api/area/getProvince",
props: {
label: "name",
value: "code",
},
},
],
},
};
},
methods: {
updateUrlDic() {
var form = this.$refs.form;
this.$message.success("先设置本地字典1s后请求url");
form.updateDic("checkbox", [
{
name: "字典1",
code: 1,
},
{
name: "字典0",
code: 2,
},
]);
setTimeout(() => {
form.updateDic("checkbox");
}, 1000);
},
},
};
</script>
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
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
Expand Copy Copy