动态新增表单,新增的每个表单下面还有一个新增的按钮,可以新增表单的子联级表单,用vue实现
时间: 2023-07-15 09:10:43 浏览: 112
可以通过使用Vue中的动态组件和递归组件来实现动态新增表单和子联级表单。
首先,定义一个表单组件Form,包含一个按钮Add,用于新增子表单:
```html
<template>
<div>
<form>
<!-- 表单内容 -->
</form>
<button @click="addForm">Add</button>
<div v-if="showSubForm">
<form-component :subForm="true"></form-component>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showSubForm: false
};
},
methods: {
addForm() {
this.showSubForm = true;
}
}
};
</script>
```
在表单组件中,使用了一个动态组件`<form-component>`来展示子表单。当点击Add按钮时,设置`showSubForm`为true,动态展示子表单。
接下来,定义一个递归组件FormComponent,用于渲染子表单:
```html
<template>
<div>
<form v-if="!subForm">
<!-- 表单内容 -->
</form>
<button v-if="!subForm" @click="addSubForm">Add</button>
<div v-if="subForm">
<form>
<!-- 子表单内容 -->
</form>
<button @click="addSubForm">Add</button>
<form-component :subForm="true"></form-component>
</div>
</div>
</template>
<script>
export default {
props: {
subForm: {
type: Boolean,
default: false
}
},
methods: {
addSubForm() {
this.$emit("add-sub-form");
}
}
};
</script>
```
在递归组件FormComponent中,如果是子表单,则不再展示Add按钮。当点击Add按钮时,通过`$emit`事件向父组件传递一个add-sub-form事件,用于新增子表单。
最后,在父组件中,监听add-sub-form事件,动态新增一个子表单:
```html
<template>
<div>
<form-component></form-component>
</div>
</template>
<script>
import FormComponent from "./FormComponent.vue";
export default {
components: {
FormComponent
},
methods: {
addSubForm() {
// 动态新增子表单
const subForm = this.$createElement(FormComponent, {props: {subForm: true}});
this.$refs.form.appendChild(subForm.$el);
}
},
mounted() {
// 初始化时动态新增一个表单
const form = this.$createElement(FormComponent);
this.$refs.form.appendChild(form.$el);
// 监听add-sub-form事件,动态新增子表单
this.$on("add-sub-form", this.addSubForm);
}
};
</script>
```
在父组件中,通过`$createElement`方法动态创建子组件,并通过`$refs.form`获取到父组件的表单元素,动态添加子组件。初始化时,动态新增一个表单。通过监听add-sub-form事件,动态新增子联级表单。
以上就是用Vue实现动态新增表单和子联级表单的方法。
阅读全文