vue+elementui 复合型输入框使用详解
<div style="margin-top: 15px;"><el-input placeholder="请输入内容" v-model="input3" class="input-with-select"><el-select v-model="select" slot="prepend" placeholder="请选择"><el-option lab
·
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="请选择"
@change=‘changeSelect’>
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
使用elementui的复合型输入框,结合自己项目需要,选的是第三种
首先要注意的一点是,如果不给select加宽度,会显示不出来
<style>
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
其次是要给后端传值,传搜索框的值 这时候就要用到this.$set(obj,key,val)
正好是单选,所以给后台传值的话,也是要动态绑定对象内的属性值
刚好this.$set,就可以给对象动态的进行绑定
<script>
export default {
data() {
return {
input3: '',
select: '',
listMaterial:{}
}
},
methods:{
changeSelect(event){
this.$set(this.listMaterial,event,this.input3)
//这个this.$set 是重点 event是切换的属性,input3是输入框的值
},
}
}
</script>
多选的还有待研究,欢迎讨论。。。。
更多推荐
已为社区贡献4条内容
所有评论(0)