console
<div id="app">
<el-button @click="addAll" size="small" type="primary">添加10条子表单数据</el-button>
</br></br>
<avue-form :option="option" v-model="obj">
<template slot-scope="{row}" slot="input">
<el-tag>{{row}}</el-tag>
</template>
</avue-form>
</div>
<script>
new Vue({
el:'#app',
data() {
return {
obj: {
dynamic: [{
''
}]
},
option: {
labelWidth: 110,
column: [{
label: '输入框',
prop: "input1",
span:12,
row: true
},
{
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",
formslot: true,
}, {
width: 200,
label: '选择框',
prop: "select",
type: 'select',
rules:[{
type:'number',
required:true,
message:'请选择选择框',
}],
dicData: [{
label: '测试1',
value: 1
}, {
label: '测试2',
value: 2
}]
}, {
width: 200,
label: '多选',
prop: "checkbox",
type: 'checkbox',
dicData: [{
label: '测试1',
value: 1
}, {
label: '测试2',
value: 2
}]
}, {
width: 200,
label: '开关',
prop: "switch",
type: 'switch',
dicData: [{
label: '测试1',
value: 1
}, {
label: '测试2',
value: 2
}]
}, {
width: 200,
label: '数字框',
prop: "number",
type: 'number'
}]
}
},
]
}
}
},
methods:{
addAll(){
for(let i=0;i<10;i++){
this.obj.dynamic.push({
input: 1,
select: 1,
radio: 1,
})
}
}
}
});
</script>