通过一个按钮可以新增一行表单,在每个新增的表单下面都有一个可以新增子表单的按钮,子表单是联级类型的。用vue2和elementui实现这个功能
时间: 2023-07-15 10:10:39 浏览: 93
jQuery移动端单选按钮美化特效
可以按照以下步骤实现这个功能:
1. 创建一个 Vue 组件,包含一个数组 `forms` 存储表单数据。
```html
<template>
<div>
<el-button type="primary" @click="addForm">新增表单</el-button>
<el-form v-for="(form, index) in forms" :key="index">
<!-- 表单内容 -->
<el-button type="primary" @click="addSubForm(index)">新增子表单</el-button>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
forms: [] // 存储表单数据
}
},
methods: {
addForm() {
this.forms.push({
// 表单数据
})
},
addSubForm(index) {
this.forms[index].subForms.push({
// 子表单数据
})
}
}
}
</script>
```
2. 在每个表单下面添加一个按钮,点击按钮添加子表单。
```html
<template>
<div>
<el-button type="primary" @click="addForm">新增表单</el-button>
<el-form v-for="(form, index) in forms" :key="index">
<!-- 表单内容 -->
<el-button type="primary" @click="addSubForm(index)">新增子表单</el-button>
<!-- 子表单内容 -->
<el-form-item v-for="(subForm, subIndex) in form.subForms" :key="subIndex">
<!-- 子表单内容 -->
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
forms: [] // 存储表单数据
}
},
methods: {
addForm() {
this.forms.push({
subForms: [] // 存储子表单数据
})
},
addSubForm(index) {
this.forms[index].subForms.push({
// 子表单数据
})
}
}
}
</script>
```
这样就完成了新增表单和子表单的功能。可以根据实际需求修改表单和子表单的内容。
阅读全文