远程搜索数据过大，显示慢的问题解决

在今天有一个需求是，下拉框可搜索远程数据，最开始做的时候用的本地数据延迟模拟，没有考虑数据量过大的问题。当远程请求时，数据量过大显示很慢，而且很冗长，到不了底的感觉。

遇到的问题：

1.触发输入框就发起请求（反复发请求，不可取）

2.将远程数据直接渲染到模板（数据太多会卡顿，还不好看）

解决办法：

1.在组件创建时就发起请求，将所有数据暂存本地（解决1）

2.每次显示只截取一部分显示，此时就下方可点击增加显示数据，每次增加50条。

 <template>
       <el-select
          v-model="data"
          remote
          filterable
          reserve-keyword
          placeholder="请输入搜索"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="change"
          >
          <el-option
            v-for="item in options"
            :key="item.key"
            :label="item"
            :value="item">
          </el-option>
          <div v-if="lists.length > 49"  class="search-keyword">
            <el-button @click="showMore">只显示前50条结果</el-button>
          </div>
        </el-select>
</template>

<script> 
export default {