表单多级联动
... 2023-1-13 About 2 min
# 表单多级联动
Tips
2.9.0+以下的老版本使用的属性是cascaderItem
Tips
cascader为需要联动的子选择框prop值，填写多个就会形成一对多的关系,key为上一级传递下来的值，你也可以直接写其他form的值
# Select多级联动
<avue-form :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data(){
return {
form:{
province: '110000',
city: '110100',
area: '110101'
},
option:{
column: [{
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
cascader: ['city'],
dicUrl: `${baseUrl}/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
},
{
label: '城市',
prop: 'city',
type: 'select',
cascader:['area'],
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/{{key}}`,
rules: [
{
required: true,
message: '请选择城市',
trigger: 'blur'
}
]
},
{
label: '地区',
prop: 'area',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getArea/{{key}}`,
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
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
Expand Copy Copy
# Select+InputTable多级联动
<avue-form :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data(){
return {
form:{
province: '110000',
city: '110100'
},
option:{
column: [ {
label: '省份',
prop: 'province',
type: 'table',
cascader:['city'],
children: {
border: true,
column: [{
label: '名称',
search:true,
searchSpan:24,
prop: 'name'
}],
},
formatter: (row) => {
if(!row.name) return ''
return row.id + '-' + row.name
},
onLoad: ({ page, value,data }, callback) => {
//首次加载去查询对应的值
if (value) {
this.$message.success('首次查询'+value)
callback({
id: '110000',
name: '北京市'
})
return
}
if(data){
this.$message.success('搜索查询参数'+JSON.stringify(data))
}
if(page){
this.$message.success('分页参数'+JSON.stringify(page))
}
//分页查询信息
callback({
total: 2,
data: [{
id: '110000',
name: '北京市'
}, {
id: '130000',
name: '河北省'
}]
})
},
props: {
label: 'name',
value: 'id'
}
},
{
label: '城市',
prop: 'city',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/{{key}}`,
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
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
Expand Copy Copy
# Select+Radio多级联动
<avue-form :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data(){
return {
form:{
province: '110000',
city: '110100'
},
option:{
column: [ {
label: '省份',
prop: 'province',
type: 'radio',
cascader:['city'],
span:24,
props:{
label:'name',
value:'code'
},
dicUrl: `${baseUrl}/getProvince`,
},
{
label: '城市',
prop: 'city',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/{{key}}`,
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
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
Expand Copy Copy
# Select+Input多级联动
110000-北京市 130000-河北省
<el-tag>110000-北京市</el-tag>
<el-tag>130000-河北省</el-tag>
<avue-form :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data(){
return {
form:{
province: '110000',
city: '110100'
},
option:{
column: [{
label: '省份',
prop: 'province',
cascader:['city'],
},
{
label: '城市',
prop: 'city',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/{{key}}`,
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
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
Expand Copy Copy
# 传递其他参数
<avue-form :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data(){
return {
form:{
province: '110000',
city: '110100',
params: 'test'
},
option:{
column: [{
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
cascader: ['city'],
dicUrl: `${baseUrl}/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
},
{
label:'参数',
prop:'params'
},
{
label: '城市',
prop: 'city',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/{{key}}?params={{params}}`,
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
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
Expand Copy Copy