vue 动态追加输入框 下拉框 动态v-model绑定
效果如下父文件<template><div class="parent-selete_header-color"><selete></selete></div></template><script>import selete from '@/pages/demo/selete.vue';export default
·
效果如下
父文件
<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]);
},
更多推荐
已为社区贡献4条内容
所有评论(0)