一、开发时候遇到动态添加筛选件(输入框、下拉框)问题,需要做成的效果如下
二、代码实现
(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]);
},