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="请选择"                     
         @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>

多选的还有待研究，欢迎讨论。。。。