主要是解决下拉框数据量大（几千条）导致的页面渲染卡顿。
原理：虚拟列表，每次只渲染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) 手动设置滚动位置到指定索引。
