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

原创

已于 2023-01-12 16:03:46 修改 · 753 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

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

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 + '.property1'"
    :rules="{
      required: true,
      message: '属性1不能为空',
      trigger: 'blur',
    }"
  >
    <el-select
      v-model="dataList.property1"
      clearable
      placeholder="请选择属性1"
    >
      <el-option
        v-for="item in selectList"