elementUI动态表单校验

需求：表单可以动态添加，如果添加了，里面的表单项需要校验。如图：

 主要是下面那个红字要在失去焦点和提交前触发，

前面的红星只要添加了rules就能出现。

1、这里的写法有点不一样所以记录一下。

  <el-row style="display: flex;padding: 0 20px;align-items: center;justify-content: flex-start">
          <h4 style="flex: 1;text-align: left">外链配置</h4>
          <el-button @click="onClickAdd"><i class="el-icon-plus" style="color: #1482f0"> </i>
          </el-button>
        </el-row>
        <ul v-if="form.external_link_conf && form.external_link_conf.length">
          <li v-for="(item,index) in form.external_link_conf" :key="index" style="display: flex">
            <el-form-item :prop="`external_link_conf[${index}].title`"
                          :rules="[{ required: true, message: '标题不能为空'}]"
                          label="标题:">
              <el-input
                v-model="item.title"
                placeholder="请输入标题"
                type="text"
              />
            </el-form-item>
            <el-form-item :prop="form.external_link_conf[index].url"
                          :rules="[{ required: true, message: '按钮样式不能为空' }]"
                          label="url:">
              <el-input
                v-model="form.external_link_conf[index].url"
                placeholder="请输入url"
                type="text"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="onClickDelete(index)"><i class="el-icon-delete" style="color: #1482f0"> </i>
              </el-button>
            </el-form-item>
          </li>
        </ul>

2、相关js函数：

 onClickAdd() {
      if (this.form.external_link_conf) {
        this.form.external_link_conf.push({title: null, url: null})
      } else {
        this.form.external_link_conf =
          this.$set(this.form, 'external_link_conf', [{title: null, url: null}])

      }
    },
    onClickDelete(index) {
      this.form.external_link_conf.splice(index)
    },

主要是上面的html代码form-item的属性绑定用字符串的形式不要加form，v-model就是item直接绑定