vue自写组件可输入，可下拉选择，因为el-autocomplete数据多了会卡

<!-- 引入组件 -->
                <AutoComplete
                  v-model="scope.row.strreceivername"
                  :lngemployeeid="scope.row.lngreceiverid"
                  @select="handleSelect($event,scope.row)"
                />
methods:{
   handleSelect(item, row) {
      row.lngreceiverid = item.lngemployeeid
      row.strreceivername = item.strfullname
    }
}

<template>
  <el-popover
    v-model="visible"
    width="300"
    trigger="focus"
    :disabled="disabled"
  >
    <vxe-grid
      ref="grid"
      border
      highlight-hover-row
      auto-resize
      height="300"
      class="vxecss"
      :show-overflow="true"
      :data="employeesList"
      :columns="tableColumn"
      @cell-click="cellClickEvent"
      @scroll="xTableScroll"
    />
    <el-input
      slot="reference"
      v-model="currVal"
      placeholder="请输入"
      maxlength="250"
      clearable
      @change="changeEvent"
      @input="inputEvent"
      @focus="focusEvent"
    />
  </el-popover>
</template>
<script>
import { getEmployeesList } from '@/base/api/common'
import PinyinMatch from 'pinyin-match'
export default {
  name: 'AutoComplete',
  props: {
    value: {
      type: String,
      default: ''
    },
    lngemployeeid: {
      type: [Number, String],
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableColumn: [
        { field: 'strfullname', title: 'strfullname' }
      ],
      employeesList: [],
      copyList: [],
      visible: false,
      xTableScrollTop: 0
    }
  },
  computed: {
    currVal: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    if (this.$store.state.employeesList) {
      this.employeesList = this.$store.state.employeesList
      this.copyList = this.$store.state.employeesList
    } else {
      this.getEmployeesListFn()
    }
  },

  methods: {
    xTableScroll({ scrollTop }) {
      this.xTableScrollTop = scrollTop
    },
    focusEvent() {
      setTimeout(() => {
        this.$refs.grid.scrollTo(0, this.xTableScrollTop)
        if (this.lngemployeeid) {
          const curRow = this.employeesList.filter(item => {
            return item.lngemployeeid === this.lngemployeeid
          })
          this.$refs.grid.setCurrentRow(curRow[0])
        }
      })
    },
    cellClickEvent({ row }) {
      this.visible = false
      this.curRow = row
      this.$emit('select', row)
    },
    changeEvent() {
      this.$emit('change')
    },
    inputEvent(val) {
      if (val) {
        this.employeesList = this.copyList.filter((item) => {
          return PinyinMatch.match(item.strfullname, val)
        })
      } else {
        this.employeesList = this.copyList
      }
    },
    getEmployeesListFn() {
      getEmployeesList({ 'blninactive': 0 }).then(res => {
        if (res.code === 20000) {
          this.employeesList = res.data
          this.copyList = res.data
          this.$store.state.employeesList = res.data
        }
      })
    }
  }
}
</script>
<style>
.vxecss .vxe-header--row{ display: none;}
</style>