效果如下
父文件
<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: {}, //匹配字段1ranges: {}, //匹配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]);},
