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

<template><el-popoverv-model="visible"width="300"trigger="focus":disabled="disabled"><vxe-gridref="grid"borderhighlight-hover-rowauto-resizeheight="300"class="vxecss":show-overflow="true":data="employeesList":columns="tableColumn"@cell-click="cellClickEvent"@scroll="xTableScroll"/><el-inputslot="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.employeesListthis.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 = falsethis.curRow = rowthis.$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.datathis.copyList = res.datathis.$store.state.employeesList = res.data}})}}
}
</script>
<style>
.vxecss .vxe-header--row{ display: none;}
</style>