点击＋号，增加form表单的子级应该怎么做能实现？-灵析社区
颜如玉你信不信 上面的图片是ui图，这是一个编辑弹窗里面的功能，用的是vue2+element ui 在入参字段下面的表单，点击右侧的加号就能添加一个子级，总共能有三级。点击减号能删除当前的子级。 这七个表单的布局，是应该写七个form-item，还是在一个form-item下面写七个input，哪个好一点呢。 请问这样的添加表单的子级应该怎么实现呢？ 求指导 求指导
777七月组件
添加
删除
export default {
name: "form-row",
model: {
prop: "value",
event: "change",
},
props: {
value: {
type: Object,
default: () => [],
},
index: {
type: Number,
default: 0,
},
},
watch: {
value: {
handler(val) {
this.$emit("change", val);
},
deep: true,
},
},
methods: {
// 添加子级
addChildren() {
if (!this.value.children) {
this.$set(this.value, "children", [{ userName: "" }]);
} else {
this.value.children.push({
userName: "",
password: ""
});
}
},
// 删除该行表单
deleteRow() {
// 抛出事件到父级执行
this.$emit("removeRow", this.index);
},
// 删除子级
removeRow(index) {
if (this.value?.children[index]?.children?.length > 0) {
alert('请先删除子级')
} else {
this.value.children.splice(index, 1);
}
},
},
};
.form-row {
display: flex;
margin-bottom: 10px;
}
.form-row .el-button {
height: 40px;
margin-left: 10px;
}
使用
import formRowVue from './views/formRow.vue';
export default {
name: "myform",
components: {
formRowVue
},
data() {
return {
formArray: [
{
userName: "张三",
password: '123456',
children: [{ userName: "张三1", password: '123456' }, { userName: "张三2", password: '123456' }],
},
]
}
},
methods: {
removeItem(index) {
if (this.formArray[index]?.children?.length > 0) {
alert('请先删除子级')
} else {
this.formArray.splice(index, 1);
}
}
},
};