表单数据格式
... 2022-8-27 About 3 min
# 表单数据格式
# 数据类型
- 组件正常接受数据格式为数组[1,2,3,4],而后台返回的类型为字符串1,2,3,4,设置dataType来进行数据转化
- 数据为字符串，字典类型为数字，设置dataType统一数据类型
{
"cascader": "1,2",
"province": 120000,
"radio": 1,
"checkbox": "1,2,3",
"selects": "1|2|3"
}
有些数据是数组形式的，我们传入字符串是无法识别的，解决数据字典和字段类型不匹配问题,配置dataType属性(string / number),separator配置分隔符，默认为,
{{obj}}
<avue-form :option="option" v-model="obj" > </avue-form>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default{
data() {
return {
obj: {
cascader:'1,2',
province: 120000,
radio:1,
checkbox:'1,2,3',
selects:'1|2|3'
},
option: {
column: [
{
label:'单选',
prop:'radio',
type:'radio',
dataType:'number',
dicData:[{
label:'选项1',
value:1
},{
label:'选项2',
value:2
},{
label:'选项3',
value:3
}]
},
{
label:'多选',
prop:'checkbox',
type:'checkbox',
dataType:'number',
dicData:[{
label:'选项1',
value:1
},{
label:'选项2',
value:2
},{
label:'选项3',
value:3
}]
},
{
label:'多选',
prop:'selects',
type:'select',
multiple:true,
separator:'|',
dicData:[{
label:'选项1',
value:'1'
},{
label:'选项2',
value:'2'
},{
label:'选项3',
value:'3'
}]
},
{
label: '级联',
prop: 'cascader',
type: 'cascader',
dataType:'string',
dicData:[{
label:'级别1',
value:1,
children:[{
label:'级别2',
value:2
}]
}],
rules: [
{
required: true,
message: '请选择级联',
trigger: 'blur'
}
]
},
{
label: '省份',
prop: 'province',
type: 'select',
dataType:'number',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getProvince`,
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
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
Expand Copy Copy
# 深层结构数据
Tips
2.6.11+
{ "deep": { "deep": { "deep": { "value": 1 } } } }
bind绑定的对象数据是双向的，改变任意一个，另外一个也会改变
<el-button type="primary" size="small" @click="form.deep.deep.deep.value='改变deep.deep.deep.value值'">改变deep.deep.deep.value值</el-button>
<el-button type="primary" size="small" @click="form.test='改变test值'">改变test值</el-button>
</br></br>
{{form}}
<avue-form :option="option" v-model="form" > </avue-form>
<script>
export default{
data() {
return {
form: {
deep:{
deep:{
deep:{
value:1
}
}
}
},
option: {
labelWidth: 120,
column: [
{
label: '我是深结构',
prop: 'test',
bind:'deep.deep.deep.value'
}
]
}
}
}
}
</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
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
Expand Copy Copy
# 数据过滤
Tips
2.9.3
{ "cascader": [ 0, 1 ], "tree": 0 }
filterDic设置为true返回的对象不会包含$前缀的字典翻译, filterNull设置为true返回的对象不会包含空数据的字段
<el-button size="small" type="danger" @click="filterDic">过滤数据字典</el-button>
<el-button size="small" type="success" @click="filterNull">过滤空数据</el-button>
<el-button size="small" type="primary" @click="filter">不过滤</el-button>
<p>{{form}}</p>
<avue-form :key="reload" v-model="form" :option="option" ></avue-form>
<script>
export default {
data() {
return {
reload:Math.random(),
form: {
cascader:[0,1],
tree:0
},
option:{
column:[{
label:'姓名',
prop:'name',
},{
label:'级别',
prop:'cascader',
type:'cascader',
dicData:[{
label:'一级',
value:0,
children:[
{
label:'一级1',
value:1,
},{
label:'一级2',
value:2,
}
]
}],
},
{
label:'树型',
prop:'tree',
type:'tree',
dicData:[{
label:'一级',
value:0,
children:[
{
label:'一级1',
value:1,
},{
label:'一级2',
value:2,
}
]
}]
}]
}
}
},
methods:{
refresh(){
this.reload=Math.random()
},
filter(){
this.option.filterDic=false
this.option.filterNull=false
this.refresh()
},
filterDic(){
this.option.filterDic=true
this.refresh()
},
filterNull(){
this.option.filterNull=true
this.refresh()
}
}
}
</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
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
Expand Copy Copy
# 清空过滤字段
Tips
2.9.3
filterParams为点击清空按钮，表单不会清除的数据，默认主键rowKey是不会清空的，默认为id
<avue-form v-model="form" :option="option" ></avue-form>
<script>
export default {
data() {
return {
form:{
name:'smallwei',
cascader:[0,1],
tree:0
},
option:{
filterParams:['name'],
column:[{
label:'姓名',
prop:'name',
},{
label:'级别',
prop:'cascader',
type:'cascader',
dicData:[{
label:'一级',
value:0,
children:[
{
label:'一级1',
value:1,
},{
label:'一级2',
value:2,
}
]
}],
},
{
label:'树型',
prop:'tree',
type:'tree',
dicData:[{
label:'一级',
value:0,
children:[
{
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
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
Expand Copy Copy