在 Vue 3 中,可以使用 Element Plus 的表单组件来实现动态表单的新增/删除行以及提交表单的功能。下面是一个示例:routerosCopy
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="form.age"></el-input-number>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="学历">
<el-select v-model="form.education">
<el-option label="本科" value="undergraduate"></el-option>
<el-option label="硕士" value="master"></el-option>
<el-option label="博士" value="doctor"></el-option>
</el-select>
</el-form-item>
<el-form-item label="工作经验">
<el-input-number v-model="form.workExperience"></el-input-number>
</el-form-item>
<el-form-item label="工作经历">
<el-button type="primary" @click="addWorkExperience">新增</el-button>
<el-button type="danger" @click="deleteWorkExperience" :disabled="workExperienceList.length === 0">删除</el-button>
<template v-for="(item, index) in workExperienceList" :key="index">
<el-form-item :label="'公司' + (index + 1)" :prop="'workExperienceList.' + index + '.company'">
<el-input v-model="item.company"></el-input>
</el-form-item>
<el-form-item :label="'职位' + (index + 1)" :prop="'workExperienceList.' + index + '.position'">
<el-input v-model="item.position"></el-input>
</el-form-item>
<el-form-item :label="'工作时间' + (index + 1)" :prop="'workExperienceList.' + index + '.duration'">
<el-date-picker v-model="item.duration" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
</el-form-item>
</template>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const form = ref({
name: '',
age: null,
gender: 'male',
education: '',
workExperience: null,
workExperienceList: []
})
const addWorkExperience = () => {
form.value.workExperienceList.push({
company: '',
position: '',
duration: []
})
}
const deleteWorkExperience = () => {
form.value.workExperienceList.pop()
}
const submitForm = () => {
console.log(form.value)
// 可以在此处发送表单数据到后端进行处理
}
return {
form,
addWorkExperience,
deleteWorkExperience,
submitForm
}
}
}
</script>
在上面的示例中,我们使用 el-form
组件渲染表单,其中包含一个“工作经历”表单项。在该表单项下方,我们使用 el-button
组件添加了一个“新增”按钮和一个“删除”按钮,用于动态添加/删除工作经历行。在表单项中使用了 v-for
指令循环渲染工作经历行,使用了 :prop
属性来指定表单项的校验规则。
在组件的 setup
中,我们使用 ref
函数定义了表单的数据,并定义了 addWorkExperience
、deleteWorkExperience
和 submitForm
三个方法。其中,addWorkExperience
方法用于添加工作经历行,deleteWorkExperience
方法用于删除最后一行工作经历,submitForm
方法用于提交表单数据。在 submitForm
方法中,我们可以将表单数据发送到后端进行处理,例如使用 Axios 库发送 POST 请求。
需要注意的是,由于 Vue 3 中使用了 Composition API,因此在模板中不能直接访问组件的属性和方法,需要使用 setup
函数来暴露这些属性和方法。另外,需要使用 ref
函数将表单数据转换为响应式对象,以便在模板中使用双向数据绑定。