vue 瀑布流组件的添加

近日，有个前端需求是 对下拉框数据不允许初始化全部数据，因为线上数据量是几千条 全部加载 影响用户体验，于是 项目经理提出，点击组件时再触发后台查询前10条数据，向下滑动加载10条，直到最后加载完成。

话不多说，上代码

load-select.vue组件

<template>
  <el-select
    value-key="id"
    :value="value"
    v-loadmore="loadMore"
    @focus="focus"
    @clear="clear"
    @change="change"
    filterable
    remote
    :filter-method="handleSearch"
    :loading="loading"
    clearable
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-option
      v-for="option in data"
      :label="option[dictLabel]"
      :value="option"
      :key="option.id"
    ></el-option>

    <!-- 此处加载中的value可以随便设置，只要不与其他数据重复即可 -->
    <el-option v-if="hasMore" disabled label="加载中..." value="-1"></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: {
      default: ""
    },
    // 列表数据
    data: {
      type: Array,
      default: () => []
    },
    dictLabel: {
      type: String,
      default: "name"
    },
    dictValue: {
      type: String,
      //default: "uid"
      default: "id"
    },
    // 调