基于vue + elementUI 的滚动触发后台数据接口分页的单选组件select-pro，带模糊查询

由于项目中的表单数据有很多是项目中维护的基础数据，量又比较大，无法实现一次性请求给完所有需要的数据。所以自己封装了一个select-pro组件，可实现 接口请求数据、触底执行分页请求、label模糊查询。

废话不多说直接上代码：

<template>
<div class="search-input">
  <el-popover
    width="300"
    v-model="visible"
    popper-class="prppverheight"
    ref="popover"
    placement="bottom-start"
    trigger="click"
  >
    <ul v-infinite-scroll="load" class="scroll-box">
      <li @mouseenter="mouseenter(i)" class="el-select-dropdown__item" @click="clickHandle(item)" :class="hoverIndex === i && 'hover'" v-for="(item, i) in list" :key="item[valKey]">{
  {item[labelKey]}}</li>
      <li class="note" v-show="state === 1">加载中...</li>
      <li class="note" v-show="state === 2">没有更多数据了</li>
      <li class="note" v-show="state === 3 || !list.length">{
  {msg}}</li>
    </ul>
  </el-popover>
  <el-input
    :size="size"
    v-model="label"
    v-popover:popover
    :placeholder="placeholder"
    :readonly="!isLabelFilter"
    @input="labelInput"
  >
  </el-input>
  <el-input
    v-show="false"
    v-model="value"
  >
  </el-input>
</div>
</template>
<script>
/**
 * 初始化逻辑：1.清空选择 请求第一页 (不触发 label value 改变逻辑)
 * selecthandle 逻辑： 改变对应的label value 不触发label value 改变逻辑
 * 输入性value 改变逻辑：改变对应的label (不触发label改变逻辑)
 * 输入性label 改变逻辑：重新请求第一页 清空value 不触发 value 改变逻辑
 * label 与 value 一定是联动修改的
*/


export default {
  name: 'renSearchInput', // 必须 否则会在使用时报错 Cannot read property 'toLowerCase' of undefined
  data () {
    return {
      visible: false,
      hoverIndex: -1,
      state: 0, // 0 常态， 无提示  1 加载中 2 没有更多数据了  3 接口错误 或 无