开发任务中有这样一个需求，下拉框中需要展示超过5000条数据，甚至更多。这数据量直接整个页面卡死了，就想到在下拉框中加分页，实现方式有如下两种：

方式一：使用elementui中的el-select和el-pagination实现分页

HTML部分：
<el-select
  v-model="value1"
  placeholder="请选择数据"
  :clearable="false"
  style="width: 240px"
  size="mini"
  filterable
  :filter-method="filter"
>
  <el-option
v-for="item in optionfen"
:key="item.value"
:label="item.value"
remote
:value="item.label"
placeholder="请输入"
  >
  </el-option>
  <div style="bottom: -10px">
<el-pagination
  small
  @current-change="handleCurrentChange"
  :current-page="currentpage"
  :page-size="pageSize"
  layout="prev, pager,next,total"
  :total="options.length"
>
</el-pagination>
  </div>
</el-select>

JS部分
export default {
  data() {
return {
  options: [],  //总数据
  optionfen: [],  //当前页码的数据
  value1: "",  //输入框的值
  currentpage: 1,   //当前页码
  pageSize: 10,   //每页展示的条数
};
  },
  methods: {
  //分页的实现,currentpage 为页码，每页展示的数据为10（可自行更改pageSize）条，分别是在总数据options中
  //下标从(currentpage -1)*10开始的十条数据
handleCurrentChange(val) {
  this.optionfen = [];
  this.currentpage = val;
  let start = (val - 1) * this.pageSize;
  let end = Number(start) + Number(this.pageSize);
  //此处需要判断如果计算的结束下标大于总数据的长度，则需要修改结束下标
  if (end > this.options.length) {
end = this.options.length;
  }
  for (let i = start; i < end; i++) {
  //将取到的数据展示在页面
this.optionfen.push(this.options[i]);
  }
},
};

方式二：使用v-selectpage组件实现分页搜索

v-selectpage官方文档地址：https://terryz.gitee.io/vue/#/selectpage/demo步骤：1.安装v-selectpage依赖

npm install v-selectpage@2.1.4 -save

2.在main.js中注册到Vue实例中

import vSelectPage from 'v-selectpage'
Vue.use(vSelectPage, {
   language: 'cn',
   placeholder: '请选择数据'
 })

3.在index.vue页面中使用

<v-selectpage :data="options" v-model="value" show-field="name" key-field="value"></v-selectpage>
//其他的属性参考官方文档

注意：v-selectpage不仅可以实现下拉框单选还可以实现多线、表格等功能点，具体的去官网查看