主要是解决下拉框数据量大（几千条）导致的页面渲染卡顿。

原理：虚拟列表，每次只渲染20条（可设置）条数据。

https://www.cnblogs.com/yuwenjing0727/p/18129844

使用步骤：

1、安装插件 npm install vue-virtual-scroll-list --save
2、引入组件virtualSelect，放置在components里面
3、局部注册组件或全局注册组件 virtualSelect
4、页面使用

// virtualSelect替换el-select
<virtualSelect
  style="width: 300px"
  v-model="form.yp"
  :selectData="{
    data: ypList, // 下拉列表的数组
    key: 'id',// 下拉框需要显示的key
    label: 'customerName',// 下拉框需要显示的名称
    value: 'customerId',// 下拉框绑定的值
    right:  'customerId',// 右侧显示绑定的值
    isRight: true,//右侧是否显示 不显示填false
  }"
  :multiple="true"
  placeholder="请选择一级渠道"
  clearable
></virtualSelect>

<!-- <el-select
  v-model="form.yp"
  filterable
  multiple
  remote
  :loading="ypLoading"
  :remote-method="ypRemoteMethod"
  style="width: 300px"
>
  <el-option
    v-for="item in ypList"
    :key="item.id"
    :label="item.customerId + '/' + item.customerName"
    :value="item.customerId"
  ></el-option>
</el-select> -->

组件自定义设置：virtualSelect文件夹里面的index.vue

<virtual-list ref="virtualList"
  class="virtualselect-list"
  :data-key="selectData.value"
  :data-sources="selectArr"
  :data-component="itemComponent"
  :keeps="20"
  :extra-props="{
      label: selectData.label,
      value: selectData.value,
      optionKey: selectData.key,
      rightValue: selectData.right,
      isRight: selectData.isRight
  }"
></virtual-list>
<!-- 可设置属性  -->
  data-key  String|Function  从data-sources每个数据对象中获取唯一键。或每个函数都调用data-source并返回其唯一键。在中，其值必须唯一data-sources，用于标识商品尺寸。
  data-sources  Array[Object]  列表数据，每一行都必须有一个唯一的id(data-key)
  data-component Component 每一行的子组件
  keeps Number 默认30个，默认渲染的个数
  extra-props Object 默认{} data-component组件的额外props通过改属性传入,内部已有source和index两个
<!-- 常用方法 -->
可以通过以下方式调用这些方法ref:
  reset()  将所有状态重置为初始状态。
  scrollToIndex(index)  手动设置滚动位置到指定索引。