在 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 函数定义了表单的数据,并定义了 addWorkExperiencedeleteWorkExperience 和 submitForm 三个方法。其中,addWorkExperience 方法用于添加工作经历行,deleteWorkExperience 方法用于删除最后一行工作经历,submitForm 方法用于提交表单数据。在 submitForm方法中,我们可以将表单数据发送到后端进行处理,例如使用 Axios 库发送 POST 请求。

需要注意的是,由于 Vue 3 中使用了 Composition API,因此在模板中不能直接访问组件的属性和方法,需要使用 setup 函数来暴露这些属性和方法。另外,需要使用 ref 函数将表单数据转换为响应式对象,以便在模板中使用双向数据绑定。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注