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]);
   
  },

猜你喜欢

转载自blog.csdn.net/huang_jimei/article/details/115326725