效果如下

父文件

<template>
  <div class="parent-selete_header-color">
    <selete></selete>
  </div>
</template>

<script>
import selete from '@/pages/demo/selete.vue';
export default {
  components: { selete }
};
</script>

<style lang="less" scoped>
/deep/ .ivu-select-selection {
  border: none;
}
/deep/ .ivu-select-visible .ivu-select-selection {
  border: none;
  box-shadow: none;
}
/deep/ .ivu-icon.ivu-icon-ios-arrow-down.ivu-select-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
}
/deep/ .ivu-select-visible .ivu-select-arrow {
  transform: translateY(0) rotate(180deg);
}
/deep/ .ivu-select-selection > div {
  display: flex;
}
/deep/ .ivu-select-arrow {
  transform: translateY(0);
}
/deep/ .ivu-select-dropdown {
  min-width: auto !important;
}
</style>

子文件

<template>
  <div v-if="modelObj">
    <!-- <Button type="primary">Primary</Button>
    <ceshi></ceshi> -->

    <div v-for="(item, index) in dataObj" :key="index">
      <Select v-model="item.key" style="margin: 50px">
        <Option v-for="subItem in item.value" :value="subItem.value" :key="subItem.value">{{ subItem.label }}</Option>
      </Select>
      {{ item.key }}
    </div>
  </div>
</template>

<script>
// import Ceshi from '@/pages/demo/ceshi.vue';
export default {
  components: {
    // Ceshi
  },
  created() {},
  data() {
    return {
      modelObj: {},
      dataObj: {
        cityList: {
          key: 'Ottawa',
          value: [
            {
              value: 'Ottawa',
              label: 'Ottawa'
            },
            {
              value: 'Paris',
              label: 'Paris'
            },
            {
              value: 'Canberra',
              label: 'Canberra1111111111'
            }
          ]
        },
        cityList2: {
          key: 'Canberra2',
          value: [
            {
              value: 'Ottawa2',
              label: 'Ottawa'
            },
            {
              value: 'Paris2',
              label: 'Paris'
            },
            {
              value: 'Canberra2',
              label: 'Canberra1111111111'
            }
          ]
        }
      }
    };
  }
};
</script>

<style lang="less" scoped></style>

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

数据源：

vue 实例：

这边的selected：0 是初始值，就是下面一张图dom中v-model 绑定的selected序号。它随着选择的序号不同而不同。

这样就实现了下拉框和span元素中内容的联动，这种办法最简便。

绑定并实现联动：

向下列表格绑定数据

<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="角色编号" prop="roleId" width="120"/>
      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="学院名称" prop="college_name" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="显示顺序" prop="roleSort" width="100"/>
      </el-table-column>
    </el-table>

使用这种方式（ this.$set(this,“roleList”,response.rows);）绑定数据后刷新列表

 methods: {
      /** 查询角色列表 */
      getList() {
        this.loading = true;
        listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.$set(this,"roleList",response.rows);
          }
        );
      },
 }