VUE ElementUI动态生成新组件并校验

需求：使用ElementUI动态生成下面这个input 组件，并对其进行合法校验

废话少说 直接上实现代码：

• HTML代码

<el-form :model="form" ref="form" label-width="80px" :label-position="'right'"  >

                            <div v-for="(item,index) in form.targetIds" :key="index">

                              <section v-if="index === 0">

                                <el-form-item  label="人员pvid"  style="margin-top:10px" :prop="'targetIds.'+index" size="mini" :rules="rules.targetIdRule">

                                  <el-autocomplete  v-model="form.targetIds[index]"

                                                  :fetch-suggestions="sugSearch"

                                                  placeholder="请输入内容"

                                                  clearable

                                                  style="width:85%"

                                  ></el-autocomplete>

                                  <el-button type="text" size="small" >

                                      <i class="iconfont icondian" :class="'trajectory-color-'+index"></i>

                                  </el-button>

                                  <el-button  icon="el-icon-plus"  style="margin-left:0px;" circle @click="plusFormItem(index)"/>

                                </el-form-item>

                              </section>

                            <section v-if="index > 0">

                              <el-form-item :prop="'targetIds.'+index" size="mini" :rules="rules.targetIdRule">

                                <el-autocomplete  v-model="form.targetIds[index]"

                                                :fetch-suggestions="sugSearch"

                                                placeholder="请输入内容"

                                                clearable

                                                style="width:85%"

                                ></el-autocomplete>

                                <el-button

                                      type="text"

                                      size="small" >

                                      <i class="iconfont icondian" :class="'trajectory-color-'+index"></i>

                                  </el-button>

                                <el-button  icon="el-icon-delete" plain style="margin-left:0px;" circle @click="rmFormItem(index)"/>

                              </el-form-item>

                            </section>

                            </div>

                      </form>

• Js代码

  data () {

      return {

        form: {

          name: '',

          startTime: '',

          endTime: '',

          targetIds: [''] //这个地方就是用来动态生成input的组件

        },

        rules: {

          targetIdRule: [{ required: true, message: '不能空', trigger: 'change' }],

          deltaDistance: [{ required: true, message: '不能空', trigger: 'change' }],

          deltaTime: [{ required: true, message: '不能空', trigger: 'change' }]

        }}

methods:{

   plusFormItem (index) {

      this.form.targetIds.push('')

    },

    rmFormItem (index) {

      this.form.targetIds.splice(index, 1)

      this.$message.success('移除成功')

    }

}

基本原理主要包含几点：

1、构造一个数组容器(空)来

在form里，初始化一个targetIds[''],通过index===0与否显示第一个和新生成的,通过plusFormItem和rmFormItem动态新增和删除

2、动态生成的组件 prop需要注意冒号

:prop prop前面一定要加引号

我查的相关资料，vue加冒号，是说明这不是一个常量不变的值，而是一个变量，说得通

不过从Java角度来讲我觉得这是一个引用类型的，有一个“指针”来指向this动向，当incr的时候就+1，decr的时候就-1

3、合法性校验

v-model="form.targetIds[index]" 如果这个地方写的不对，rules是不管事儿的，具体什么原因，未知

必须要这么写！！保证每个组件的v-model是唯一的，不能重复,如果重复的话，v-model就不知道将数据绑定到哪了

以上三点注意好后，就能实现动态新增和删除el组件了

实现后的效果：