代码拉取完成,页面将自动刷新
大佬,我在实际使用过程中涉及到单表单多个子表单的需求,遇到的问题如下:
1、2.7.4版本
1.1 第一个表单校验正常
1.2 第二个表单校验异常,如下图右下角错误提示
2、2.7.9版本
2.0 同时也出现子表单校验的*号与输入框换行的,如2.1图
2.1 第一个表单校验异常
2.2 第二个表单校验异常
复现DEMO如下:
<template>
<basicContainer>
<avue-form :option="option1" v-model="obj" @submit="add">
</avue-form>
</basicContainer>
</template>
<script>
export default {
data() {
return {
obj: {
dynamic: [],
dynamic1: []
},
option1: {
column: [{
label: '子表单',
prop: 'dynamic',
type: 'dynamic',
span: 24,
rules: [{
required: true,
message: '请选择选择框1',
}],
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",
rules: [{
required: true,
message: '请选择选择框2',
}],
}]
}
},
{
label: '子表单',
prop: 'dynamic1',
type: 'dynamic',
span: 24,rules: [{
required: true,
message: '请选择选择框',
}],
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",
rules: [{
required: true,
message: '请选择选择框3',
}],
}]
}
}
]
}
}
},
methods: {
add(obj, done) {
console.log(obj);
done();
}
}
}
</script>