Vue+element动态追加输入框、下拉框，动态绑定v-model

一、开发时候遇到动态添加筛选件（输入框、下拉框）问题，需要做成的效果如下

二、代码实现
（1）template部分

<el-collapse-item title="查询条件" name="1">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
     <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'条件' + index" :key="domain.key" :prop="'domains.' + index + '.value'">
      <el-select v-model="names[index]" placeholder="请选择">
       <el-option v-for="item in select_name1" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="ranges[index]" placeholder="请选择">
       <el-option v-for="item in range1" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input v-model="values[index]" placeholder="请输入内容" style="width: 30%;" clearable></el-input>
      <el-button @click.prevent="removeDomain(domain)">删除</el-button>
     </el-form-item>
     <el-form-item>
      <el-button @click="addDomain">新增条件</el-button>
      <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
     </el-form-item>
    </el-form>
   </el-collapse-item>

（2）data值

export default {
 data() {
  return {
   dynamicValidateForm: {
    domains: [
     {
      value: ''
     }
    ]
   },
   names: {}, //匹配字段1
   ranges: {}, //匹配
   values: {}, //匹配内容
   }
   

（3）事件

resetForm(formName) {
   this.$refs[formName].resetFields();
  },
  removeDomain(item) {
   var index = this.dynamicValidateForm.domains.indexOf(item);
   if (index !== -1) {
    this.dynamicValidateForm.domains.splice(index, 1);
   }
  },
  addDomain() {
   this.dynamicValidateForm.domains.push({
    value: '',
    key: Date.now()
   });
  },
  //查询
  sefun() {
   console.log('字段',this.names);//匹配字段
   console.log('范围',this.ranges);//匹配范围
    console.log('内容',this.values);//匹配内容 
   // console.log(this.values[1]);
   
  },