vue2+elementUi动态生成表单的一种优化

1. 背景

做项目过程中，经常需要动态添加、删除表单中的某一项。

比如动态设置时间值等。

2. 问题

elementUI给出过官方优化方案：通过v-fo循环设置el-form-item。

在同一组件内渲染，可能出现以下问题：

1. 必须设置实时的动态key，否则删除、添加时有几率会出现错误校验
2. 复杂校验不好控制

3，解答

推荐使用动态渲染子组件：父组件引用子组件的 template 循环

好处

1. 每个都是单独的form校验，不会互相影响
2. 独立的item，不需要再使用index下标来定位

template 循环-部分代码

//父组件内引用
<create-region 
 class="section-form" 
 ref="refCreateAz" 
 :infoData="item" 
 :indexNum="index" 
 :isShowCloseBtn="isShowCloseBtn" 
 v-for="(item, index) in form.azList" 
 :key="index" 
 @deleteItem="deleteItem"> 
</create-region>

//子组件
<template>
  <el-form :model="infoData" :rules="rulesAz" label-width="150px" ref="formAz">
    <span v-if="isShowCloseBtn" class="close" @click="deleteItem">
      <i class="el-icon-close"></i>
    </span>
    <el-form-item label="可用区名称：" prop="azName" label-width="150px">
      <el-input placeholder="请输入可用区名称" v-model="infoData.azName" :maxlength="30"></el-input>
    </el-form-item>
  </el-form>
</template>

4，后记

之前一直使用第一种方法，经常会因为key值重复或者其他问题导致渲染错误。所以推荐使用第二种，更易优化且不会出错。

5，引用来源

作者： Krryblog

文章链接：ainyi.com/66

违规请联系删除，plz。