Vue Elemen-UI实现动态增减表单项并校验

云端之下

已于 2023-01-12 16:03:46 修改

阅读量693

点赞数

文章标签： vue.js 前端 javascript

于 2023-01-12 15:57:48 首次发布

本文链接：https://blog.csdn.net/qq_44523890/article/details/128661330

版权

该文章展示了如何在Vue中使用Element-UI框架动态添加和删除表单中的列表项，并进行相应的数据校验。数据以formData对象的形式管理，利用v-model和动态prop进行表单绑定，同时通过自定义校验规则确保属性不为空。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue Elemen-UI实现动态增减表单项并校验

表单动态新增列表数据，并校验

基础数据

data(){
 return {
  formData:{
  	dataLists:[{property1:'',property2:''},{property1:'',property2:''}]
  }，
  selectList：['属性1','属性2']
 }
}

注意：有人疑惑为啥把dataLists包裹在formData对象里，不能直接用吗？能用界面会显示，但v-model接收的是对象，dataLists是数组，因此会报错。如果你不想把他放到对象里可以利用计算属性把他转换为对象再用。

template

<el-form
v-if="nowChanceStau === 'addInfo'"
ref="formData"
:model="formData"
:rules="rules"
class="el-form"
>
<div
  v-for="(dataList,index) in formData.dataLists"
  :key="dataList.key"
>
  <el-form-item
    :label="'列' + (index + 1) + '属性1' "
    :prop="'dataList.' + index + &