elementUI-select下拉框内容多渲染慢能否分页或怎样规避blur事件

Question

1.elementUI 的select支持搜索，数据后端获取。现项目经理提需求，内容多时下拉框渲染慢，想把下拉框内容做成分页形式。
后端已支持分页
2.前端加上分页组件后，发现点下一页，可能触发了blur事件，select输入框输入的搜索内容清空，下拉框收起。
问：
1，能否对下拉框options做分页，点击下一页怎样规避blur事件而去调用接口，重新渲染下拉框数据
2，实在做不了分页，怎样能加快数据请求和页面渲染，提升用户体验

Answer 1

我之前也想在el-autocomplete上做跟你类似需求的分页功能，想实现滚动条拉到底部加载更多。
但是实现不了，除非修改源码等于自己要重写一遍这个组件了，代价太大。

后来用了一个笨办法，前端分页每次拉取50条，拿到回调数据根据后端的total字段如果有更多的话就在回调数组最后面插入一个标识对象

result.push({type: 'more'});

然后模板中给用户提示

<template slot-scope="{ item }">
  <template v-if="item.type === 'more'">
    <div class="text-center pad-allm bord-top">
      <a class="text-normal">只显示前50条结果，请完善搜索关键字</a>
    </div>
  </template>
  <template v-else>
    <goods-item
        size="small"
        :is-router="false"
        :data="item"
    >
    </goods-item>
  </template>
</template>

原来是想着点击这条标识加载更多的，就是遇到跟你一样的问题没办法改成提示了?

Answer 2

哈哈哈哈 用的方法和楼上一样。截取搜索的前n条。
反正是模糊搜索。只要输入足够精确，是可以搜索出来的。