要求:select 内有多个选项,根据所选选项,显示右侧的输入框类型,同时能添加一条筛选条件,可删除任意一条筛选条件
html部分
<div>
<div>
<div v-for="line,index in selectLine" style="display: flex;">
<el-select v-model="line.value" placeholder="请选择" @change="selectChange(line)">
<el-option v-for="data in selectData" :key="data.label" :label="data.label" :value="data.label"></el-option>
</el-select>
<div v-if="line.compType == 'select'">
<el-select v-model="line.childSelectDataValue" placeholder="请选择">
<el-option v-for="data in childSelectData" :key="data" :label="data" :value="data"></el-option>
</el-select>
</div>
<div v-else-if="line.compType == 'input'">
<el-input v-model="line.childInputValue" placeholder="请输入内容"></el-input>
</div>
<div v-else-if="line.compType == 'time'">
<el-date-picker v-model="line.childTimeValue" type="date" placeholder="选择日期"></el-date-picker>
</div>
<div v-else>
<el-button>默认按钮</el-button>
</div>
<span v-if="index == selectLine.length-1" style="width:30px;height:30px;font-size: 32px;line-height: 40px;" @click="add()">+</span>
<span v-if="index != 0" style="width:30px;height:30px;font-size: 32px;line-height: 40px;" @click="del(index)">-</span>
</div>
</div>
<div>
<el-button type="primary" @click="getValue()">获取最终的值</el-button>
</div>
</div>
javascript部分
<script>
export default {
components : {
},
computed:{
},
data(){
return{
selectLine:[],
selectData:[
{label: "Foo"},
{label: "Bar"},
{label: "Car"}
],
compMap:{},
childSelectData:["男","女"],
}
},
mounted(){
this.selectLine = [{}] //这里可以写默认值
this.compMap = new Map()
this.compMap.set("Foo","select")
this.compMap.set("Bar","input")
this.compMap.set("Car","time")
},
methods:{
selectChange(line){
line.compType = this.compMap.get(line.value)
},
add(){
this.selectLine.push({})
},
del(index){
this.selectLine.splice(index, 1)
},
getValue(){
console.log(this.selectLine)
}
}
}
</script>