el-select是实现文本模糊匹配功能

<template>
  <div>
    <el-select
    v-model="value"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    loading-text="正在查询中..."
    :remote-method="remoteMethod"
    :loading="loading"
    @visible-change="visibleChange"	
    clearable
    @change="getPersonalName"
    >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </div>
</template>
<script>
import httpClient from '@/utils/httpClient'
import tools from '@workspace/utils/tools'
import { getRoleAllPersonal } from './api.js'
const request = httpClient.instance.request
export default {
  name: 'publicSelectPersonal',
  components:{},
  props:{
    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    }, 
    roleCode: {
      type: String,
      default: ''
    },
    //'1'-名字，'2'-empId，'3'-userId
    isUserName: {
      type: String,
      default: '1'
    },
  },
  data() {
    return {
      personalSelectList:[],//人员数据列表
      value: '',//关键字
      options: [],
      loading: false,
    }
  },
  watch: {
    propsImposeTier: {
      handler(newVal) {
      },
      deep: true,
      immediate: true
    },
  },
  created() {},
  beforeMount(){
    // this.pageSelectDataInit()
  },
  mounted(){},
  methods: {
    //获取角色下的所有人员
    // async pageSelectDataInit() {
    //   await getRoleAllPersonal({
    //     pageIndex: 1,
    //     pageSize: 10,
    //     projectManagerName:'',
    //     role: this.roleCode
    //   }).then(res => {
    //       if (res && res.data.result === '1') {
    //         let resData = res.data.rows;
    //           if(resData && resData.length > 0){
    //             this.personalSelectList = resData.map(item => {
    //              return { value: `${item.userDesc}`, label: `${item.userDesc}【${item.orgName}】` };
    //           });
    //           }
    //       }
    //     })
    // },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        getRoleAllPersonal({
            pageIndex: 1,
            pageSize: 20,
            projectManagerName: query,
            role: this.roleCode
          }).then(res => {
              if (res && res.data.result === '1') {
                let resData = res.data.rows;
                  if(resData && resData.length > 0){
                      this.personalSelectList = resData.map(item => {
                      return { value: `${this.isUserName == '1' ? item.userDesc:this.isUserName == '2' ? item.empId:item.userId}`, label: `${item.userDesc}【${item.orgName}】` };
                    });
                  }
                  setTimeout(() => {
                    this.loading = false;
                    this.options = this.personalSelectList.filter(item => {
                      return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
                    });
                    // if (this.options.length === 0) {
                    //   const newOption = { value: query, label: query };
                    //   this.options = [newOption];
                    // }
                  }, 200);
              }
            })
        // setTimeout(() => {
        //   this.loading = false;
        //   this.options = this.personalSelectList.filter(item => {
        //     return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        //   });
        //   if (this.options.length === 0) {
        //     const newOption = { value: query, label: query };
        //     this.options = [newOption];
        //   }
        // }, 200);
      } else {
        this.options = [];
      }
    },
    //下拉框隐藏时调用
    visibleChange(val){
      this.options = !val ? [] : this.options;
    },
    //传给父组件
    getPersonalName(val) {
      this.$emit('getPersonalName', val)
    }
  }
}
</script>