主要是解決下拉框數(shù)據(jù)量大（幾千條）導(dǎo)致的頁面渲染卡頓。

原理：虛擬列表，每次只渲染20條（可設(shè)置）條數(shù)據(jù)。

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, // 下拉列表的數(shù)組
    key: 'id',// 下拉框需要顯示的key
    label: 'customerName',// 下拉框需要顯示的名稱
    value: 'customerId',// 下拉框綁定的值
    right:  'customerId',// 右側(cè)顯示綁定的值
    isRight: true,//右側(cè)是否顯示 不顯示填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> -->

組件自定義設(shè)置：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>
<!-- 可設(shè)置屬性  -->
  data-key  String|Function  從data-sources每個數(shù)據(jù)對象中獲取唯一鍵。或每個函數(shù)都調(diào)用data-source并返回其唯一鍵。在中，其值必須唯一data-sources，用于標(biāo)識商品尺寸。
  data-sources  Array[Object]  列表數(shù)據(jù)，每一行都必須有一個唯一的id(data-key)
  data-component Component 每一行的子組件
  keeps Number 默認(rèn)30個，默認(rèn)渲染的個數(shù)
  extra-props Object 默認(rèn){} data-component組件的額外props通過改屬性傳入,內(nèi)部已有source和index兩個
<!-- 常用方法 -->
可以通過以下方式調(diào)用這些方法ref:
  reset()  將所有狀態(tài)重置為初始狀態(tài)。
  scrollToIndex(index)  手動設(shè)置滾動位置到指定索引。