需求：实现点击按钮el-button，生成多个el-form-item；并对el-form-item单独设置表单校验规则

一、实现点击按钮el-button，生成多个el-form-item

思路：循环要多次生成的字段，并把循环后的结果push进一个数组，就能拿到多个相同属性的el-form-item的值。

<template v-for="item in testArray">
  <el-row>
    <el-col :span="12">
      <el-form-item label="类别" prop="type" :rules="typeRules">
        <el-select 
          v-model="item.type" 
          style="width:80%;"
          filterable
          clearable
          @change="getContext"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.disckey"
            :label="item.discname"
            :value="item.discname"
          />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item label="建议" prop="desc" :rules="descRules" >
        <el-input 
          type="textarea" 
          :autosize="{ minRows: 4, maxRows: 4}"
          maxlength="1000"
          show-word-limit
          v-model="item.desc" 
          style="width:100%;"
          @change="getContext"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-button style="margin-left: 20px" type="primary" size="small" @click="addM">添加</el-button>
  </el-row>
</template>

// 添加
addM(){
  this.testArray.push({
    type: '',
    desc: ''
  })
},

可以打印 testArray 测试一下，还有就是要注意，需要循环的字段是否最少要保留一个，可以在删除时作下判断。

<el-button style="margin-left: 20px" type="danger" size="small" @click="deleM">删除</el-button>

// 删除措施
deleM(){
  if(this.testArray.length > 1){
    this.testArray.pop({
      type: '',
      desc: ''
    })
  }else{
    this.$alert('最后一个无法删除！', '提示信息', {
      confirmButtonText: '确定'
    });
  }
},

二、对el-form-item单独设置表单校验规则

如上部分的html代码

<el-form-item label="类别" prop="type" :rules="typeRules">
</el-form-item>
<el-form-item label="建议" prop="desc" :rules="descRules">
</el-form-item>

data(){
  return {
    // 类别校验
    typeRules: [{
    required: true,
    message: '类别不能为空',
    trigger: 'blur'
  }],
  // 建议校验
  descRules: [{
    required: true,
    message: '建议不能为空',
    trigger: 'blur'
  }],
 }
}

直接在对应字段的el-form-item上绑定校验规则。

---

希望以上不止对自己有帮助———加油(ง •_•)ง