vue+element 封装下拉分页

<template>
  <el-select
    v-model="value"
    filterable
    clearable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :disabled="disable"
    @visible-change="clickSelect"
    @change="updateSelect"
    @clear="cleanSelect"
  >
    <el-option
      v-for="item in selectOptions"
      :key="item.key"
      :label="item.value"
      :value="item.key"
      placeholder="请输入"
    >
      <span style="float: left">{{ item.value }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.key }}</span>
    </el-option>
    <div style="bottom: -10px">
      <el-pagination
        small
        :current-page="this.pageInfo.current"
        :page-size="this.pageInfo.size"
        layout="prev, pager,next,total"
        :total="this.pageInfo.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-select>
</template>

<script>
export default {
  name: 'SelectPagin',
  model: {
    prop: 'inputValue',
    event: 'updateInputValue'
  },
  props: {
    inputValue: { type: String, default: '' },
    disable: { type: Boolean, default: false },
    changePrev: { type: Function, default: (data) => {} },
    inputChange: { type: Function, default: () => {} },
    selectItem: { type: Function, default: () => {} },
    cleanSelect: { type: Function, default: () => {} },
    dataOptions: {
      type: Array,
      default: () => []
    }, pageInfoProps: {
      type: Object,
      default: () => {
        return { current: 1,
          size: 7,
          total: 0
        }
      }
    }
  },
  data() {
    return { value: '', selectOptions: [], tempOptions: [], pageInfo: {}, query: '' }
  }, watch: {
    dataOptions() {
      if (JSON.stringify(this.dataOptions) !== JSON.stringify(this.tempOptions)) {
        this.selectOptions = this.dataOptions
        this.pageInfo.current = 1
        this.initPage(null)
      }
    }, inputValue() {
      if (this.inputValue !== this.value) { this.value = this.inputValue }
    }
  },
  mounted() {
    this.value = this.inputValue
    this.selectOptions = this.dataOptions
    this.tempOptions = JSON.parse(JSON.stringify(this.dataOptions))
    this.pageInfo = { ...this.pageInfoProps }
    this.initPage(null)
  },
  beforeDestroy() {
  },
  methods: {
    clickSelect(val) {
      if (val === true) {
        this.value = this.inputValue
        this.selectOptions = []
        this.changePrev()
      }
    },
    // 过滤本地数据
    remoteMethod(val) {
      this.pageInfo.current = 1
      this.query = val
      const datas = this.initPage(val)
      this.inputChange({ haveSelect: datas.length > 0, val: val })
    },
    updateSelect(val) {
      if (val !== '') {
        this.$emit('updateInputValue', val)
        this.selectItem(this.selectOptions.find(item => item.key === val))
        this.query = ''
        this.pageInfo = { ...this.pageInfoProps }
        this.initPage(null)
      }
    },
    initPage(val) {
      let temp = []
      if (val === null || val === '') {
        temp = this.dataOptions
      } else {
        const dataTemp = JSON.parse(JSON.stringify(this.dataOptions))
        const filterList = dataTemp.filter(item => item.value?.includes(val))
        temp = filterList
        debugger
      }
      this.selectOptions = []
      let startIndex = (this.pageInfo.current - 1) * this.pageInfo.size; const endIndex = startIndex + this.pageInfo.size > temp.length ? temp.length : startIndex + this.pageInfo.size
      this.pageInfo.total = temp.length
      while (startIndex < endIndex) {
        this.selectOptions.push(temp[startIndex])
        startIndex++
      }
      return temp
      // 没有内容     接口调用
    }, handleCurrentChange(val) {
      this.pageInfo.current = val
      this.initPage(this.query)
    }
  }
}
</script>

<style scoped>
.select-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
}

.back-to-ceiling .Icon {
  fill: #9aaabf;
  background: none;
}
</style>