vue+Element-ui select远程查询实现

---

前言

在本次项目中，需要完成根据用户输入手机号进行远程搜索的需求
解决方式：获取焦点，可以让用户选择，也可以让用户在输入框中输入，实现模糊搜索，也可以多选。因为使用element-ui，所以就使用了select的远程搜索。

---

template部分

 <el-form-item label="用户手机号" prop="enterpriseUserId" :label-width="dialogFormLabelWidth">
      <el-select
          v-model="ruleForm.enterpriseUserId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入手机号"
          :remote-method="remoteMethod"
          :loading="loading">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.phone"
            :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

data部分

ruleForm:{
        enterpriseUserId:"",//企业用户id
      },
options: [],
list: [],

method部分

remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.phone.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
/**
     * 获得企业用户电话*/
    getUsers:function (){
      let url=this.urls.getUsers;
      this.axios({
        url:url,
        method:"GET"
      }).then(res=>{
        let code=res.data.code;
        if(code===200){
          for (let i = 0; i < res.data.data.length; i++) {
            let obj = {}
            obj.id = res.data.data[i].id;
            obj.phone = res.data.data[i].phone;
            this.list.push(obj)
          }
        }
      }).catch(error=>{
        console.log(error);
      })
    },

activate部分

  activated() {
    this.getUsers();
  },

上面当el-select获取焦点的时候，我们把请求到的数据复制给option4，页面做一个渲染，当我们输入实现模糊搜索的时候，使用的是过滤。