由于下拉数据比较多，造成卡顿用户体验极差，所以使用滚动加载的办法提高用户体验

方案一：（局部自定义一个指令）

第一步（创建指令）

export default {
	directives: {
	    loadMore: {
	      bind(el, binding) {
	        // 获取element，定义scroll
	        let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
	        select_dom.addEventListener('scroll', function () {
	          let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
	          if (height) {
	            binding.value()
	          }
	        })
	      }
	    }
	  },
}

第二步（使用）

<el-form-item label='所属系统:' prop='instanceId'>
   <el-select 
	   @keyup.enter.native='searchList' 
	   v-loadMore="loadMore" 
	   v-model='search.instanceId' 
	   placeholder='请选择'
	>
		<el-option 
			v-for='item in selectSysInstanceList' 
			:label='item.name' 
			:value='item.id'
            :key='item.id'>
        </el-option>
    </el-select>
</el-form-item>
loadMore(){
   if( this.sysInstanceIndex + 1 >= this.sysInstanceTotalPages ) return
   this.sysInstanceIndex ++
   // 获取列表数据的方法
   this.selectSysInstance()
},
/**
  * @description 获取所属系统下拉选择列表
  * @author 饺子
  */
async selectSysInstance() {
  let query = {
    pageIndex: this.sysInstanceIndex,
    pageSize: 10
  }
  const {code, data: {content = [], totalPages}} = await this.$requestFormData(this.$api.selectSysInstance, query, {showLoading: false})
  if(code !== 200) return
  this.sysInstanceTotalPages = totalPages
  this.selectSysInstanceList = [...this.selectSysInstanceList, ...content]
},

方案二：（全局自定义一个指令）

第一步：（自定义指令）

// directive.js （和main.js同级）
import Vue from 'vue'

// 滚动加载更多
Vue.directive('loadMore', {
  bind(el, binding) {
    // 获取element，定义scroll
    let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    select_dom.addEventListener('scroll', function () {
      let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (height) {
        binding.value()
      }
    })
  }
})

第二步：（在main.js导入）

import './directives'

第三步：（使用）

同方案一使用

解决el-select 滚动加载回显问题

前提：后端得把选中项的label 和 value都返给你
1、el-select 设置 ref、value-key (我的为：value-key=“id”)
2、el-option value设置为object 如下（我的格式为： {id, name}）
3、获取到详情信息后设置el-select的v-model的值为 {id, name}
4、 最后给下拉项设置虚拟值
this.$refs.select.cachedOptions.push({
 currentLabel: data.instanceId.name,   // 当前绑定的数据的label
 currentValue: data.instanceId,      // 当前绑定数据的value
 label: data.instanceId.name,       // 当前绑定的数据的label
 value: data.instanceId          // 当前绑定数据的value
})

<el-form-item label='所属系统权限:' prop='instanceId'>
   <el-select
     style="width: 100%"
     ref="select"
     v-loadMore="loadMore"
     v-model='form.instanceId'
     placeholder='请选择'
     value-key="id"
     @change="val => getSysInstanceMenu(val.id)"
   >
     <el-option
       v-for='item in selectSysInstanceList'
       :label='item.name'
       :value='item'
       :key='item.id'/>
   </el-select>
 </el-form-item>

/**
     * @description 获取角色基础信息
     * @author 饺子
     */
    async getDetailInfo() {
      const {
        code,
        data
      } = await this.$requestFormData(this.$api.getPlatformRoleInfo, {roleId: this.$route.query.roleId})
      if (code !== 200) return
      await this.getSysInstanceMenu(data.instanceId)
      data.roleId = data.id
      data.instanceId = {
        id: data.instanceId,
        name: data.instanceName
      }
      this.$nextTick(() => {
        this.$refs.select.cachedOptions.push({
          currentLabel: data.instanceId.name, // 当前绑定的数据的label
          currentValue: data.instanceId,      // 当前绑定数据的value
          label: data.instanceId.name,        // 当前绑定的数据的label
          value: data.instanceId              // 当前绑定数据的value
        })
        this.checkedMenu = data.menuIdList
        this.form = data
      })