远程搜索输入框（带分页）

<template>
    <div>
        <p>搜索结果：{{value}}</p>
        <el-select
      v-model="value"
      filterable
      remote
      placeholder="请输入关键词"
      :remote-method="remoteMethod">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
      <!-- 分页 -->
      <div style="float: right; margin-right: 10px; padding-bottom: 10px">
              <el-pagination
                small
                :current-page = 'listQuery.page'
                :page-size="listQuery.pageSize"
                layout=" prev, pager, next,total"
                :total="total"
                @current-change="handleCurrentChange"
              />
            </div>
    </el-select>
    </div>
  </template>
  
  <script>
  import {  employeeList } from '@/api/essentialData'//这边调用接口，获取数据列表

    export default {
      data() {
        return {
          listQuery:{
            page:1,
            pageSize:10,
            search:{
                name:undefined
            }
          },
          total:10,
          options: [],
          value: '',
        }
      },
      methods: {
        handleCurrentChange(value){
            console.log('分页',value)
            this.listQuery.page = value;
            employeeList(this.listQuery)
            .then((res)=>{
                this.options = res.data.data;
            })
        },
        remoteMethod(query) {
            this.listQuery.search.name = query;
            this.listQuery.page = 1
            employeeList(this.listQuery)
            .then((res)=>{
                this.options = res.data.data;
                this.total = res.data.total;
            })
        }
      }
    }
  </script>