Dynamic子表单
... 2021-7-29 About 2 min
# Dynamic子表单
# 表格用法
内部组件为crud组件，大部分属性参考Crud文档
配置dynamic的children字段即可
<el-button @click="addAll" size="small" type="primary">添加10条子表单数据</el-button>
</br></br>
<avue-form :option="option" v-model="form">
<template slot-scope="{row}" slot="input">
<el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
</template>
</avue-form>
<script>
export default {
data() {
return {
form: {
dynamic: [{
input: 1,
select: 1
}, {
input: 2,
select: 2
}]
},
option: {
column: [
{
label: '子表单',
prop: 'dynamic',
type: 'dynamic',
span:24,
children: {
align: 'center',
headerAlign: 'center',
rowAdd:(done)=>{
this.$message.success('新增回调');
done({
input:'默认值'
});
},
rowDel:(row,done)=>{
this.$message.success('删除回调'+JSON.stringify(row));
done();
},
column: [{
width: 200,
label: '输入框',
prop: "input"
}, {
label: '选择框',
prop: "select",
type: 'select',
dicData: [{
label: '测试1',
value: 1
}, {
label: '测试2',
value: 2
}]
}]
}
},
]
}
}
},
methods:{
addAll(){
for(let i=0;i<10;i++){
this.obj.dynamic.push({
input: 1,
select: 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
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
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
Expand Copy Copy
# 表单用法
内部组件为form组件，大部分属性参考Form文档
配置type为form类型即可转化为表单格式，配置index为false即可隐藏序号
<avue-form :option="option" v-model="form">
<template slot-scope="{row}" slot="input">
<el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
</template>
</avue-form>
<script>
export default {
data() {
return {
form: {
dynamic: [{
input: 1,
select: 1
}, {
input: 2,
select: 2
}]
},
option: {
column: [
{
label: '子表单',
prop: 'dynamic',
type: 'dynamic',
span:24,
children: {
index:false,
align: 'center',
type:'form',
headerAlign: 'center',
rowAdd:(done)=>{
this.$message.success('新增回调');
done({
input:'默认值'
});
},
rowDel:(row,done)=>{
this.$message.success('删除回调'+JSON.stringify(row));
done();
},
column: [{
width: 200,
label: '输入框',
prop: "input"
}, {
label: '选择框',
prop: "select",
type: 'select',
dicData: [{
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
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
Expand Copy Copy
# 父子联动
<avue-form :key="reload" :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
data() {
return {
form: {},
reload: Math.random(),
}
},
watch:{
'form.province'(){
this.reload = Math.random()
}
},
computed: {
option() {
return {
column: [{
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}, {
label: '子表单',
prop: 'dynamic',
type: 'dynamic',
span: 24,
children: {
column: [
{
label: '城市',
prop: 'city',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `${baseUrl}/getCity/`+this.form.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
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
Expand Copy Copy