Element ui plus --- el-select 下拉框下拉选项过多导致页面卡顿处理方法

业务场景：

多个页面调用同一个接口 作为下拉框的选项数据，接口返回上千条 导致页面异常卡顿

解决办法：

使用Select V2 虚拟列表选择器

代码示例：

  <el-form-item label="场所名称">
            <el-select-v2 class="row-inp" v-model="queryForm.id" :options="placeData" clearable filterable placeholder="请选择场所"> </el-select-v2>
          </el-form-item>

这里由于多个页面使用 所以将数据请求放在了vuex actions 中 ，具体代码如下：

页面获取getters

const placeData = computed(() => store.getters.getPlaceDataList)
如果数据为空 则做异步请求

if (placeData.value.length <= 0) {

  store.dispatch('getPlaceData')

}

 vuex 代码示例：

在store 中创建modules下创建global.js

mport { queryHotelGroupBrands } from '@/api/placeManager/index.js'
import { queryHotelName } from '@/api/reportManage/index.js'
const state = () => ({
  language: 'zh', //国际化语言
  groupData: [], //集团、
  placeData: [] //场所
})

const mutations = {
  setGlobalLanguage(state, payload) {
    state.language = payload
  },
  setGroupData(state, payload) {
    state.groupData = payload
  },
  setPlaceData(state, payload) {
    state.placeData = payload
  }
}

const actions = {
  async getGroupData({ commit }) {
    await queryHotelGroupBrands({ level: 1 }).then(res => {
      commit('setGroupData', res.data)
    })
  },
  async getPlaceData({ commit }) {
    await queryHotelName().then(res => {
      commit('setPlaceData', res.data)
    })
  }
}

const getters = {
  getPlaceDataList(state) {
    if (state.placeData.length > 0) {
      return state.placeData.map(item => ({
        value: item.hotelId,
        label: item.hotelName
      }))
    } else {
      return []
    }
  },
  getPlaceNameData(state) {
    return state.placeData.map(item => ({
      value: item.hotelName,
      label: item.hotelName
    }))
  }
}
export default {
  state,
  mutations,
  actions,
  getters
}

在 vuex 下的index 导出global.js

import { createStore } from 'vuex'
import account from './modules/account'
import menu from './modules/menu'
import map from './modules/map'
import size from './modules/size'
import global from './modules/global'
export default createStore({
  modules: {
    account,
    menu,
    map,
    size,
    global
  }
})

以上即可