el-selected实现模糊匹配

<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>