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

云端之下

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

阅读量537

点赞数

文章标签： 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进行表单绑定，同时通过自定义校验规则确保属性不为空。

摘要由CSDN通过智能技术生成

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"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>
  </el-form-item>
  <el-form-item
    :label="'列' + (index + 1) + '属性2' "
    :prop="'dataList.' + index + '.property2'"
    :rules="{
      required: true,
      message: '属性2不能为空',
      trigger: 'blur',
    }"
  >
    <el-input
      v-model="dataList.property2"
      disabled
      placeholder="请输入属性2"
    />
  </el-form-item>
  // 删除列表
  <div @click="delArrayList(index)">
    <i class="el-icon-minus"></i>
  </div>
</div>
// 添加列表
<div @click="addArrayList()">
  <i class="el-icon-plus"></i>
</div>
</el-form>

表单增删数据方法

methods: {
  //添加一条数据
  addArrayList(){
    this.formData.dataLists.push({property1:'',property2:'',key: Date.now()});
  }
  //删除一条数据
  delArrayList(index) {
    if (this.formData.dataLists.length === 1) {
      return; // 只有一条数据不可删除
    } else {
      this.formData.dataLists.splice(index, 1);
    }
  },
}