element-ui中select下拉框加载大数据渲染优化

现在的前端项目中对于element-ui的使用几乎已经是一个常规动作了，但是组件库中的ui组件不一定都能满足实际场景的需求，比如今天要讲的select下拉框选择组件。

我们公司是做证券行业基础设施的，股票和证券的数量动不动就是上千，当使用select渲染的时候就会很有压力，我司大致3000条数据，全部渲染出来大致需要4s左右，并且多选模式时，选中和反选时会明显感觉卡顿，这在体验上是觉得不能接受的，所以就开始了优化历程。

方案一：把下拉多选功能做成弹框表格多选

可行性：表格设置selection属性，翻页功能可以解决大数据问题

实际情况：需要展示的字段只要2个即可，对于表格来说太少，显得太空；产品也不同意

弃之~~

方案二：利用select的远程搜索功能，初始化只加载指定数量数据，其它数据通过搜索功能查询

可行性：能满足大数据需求，只是体验上打了点折扣，后台也能支持

实际情况：产品能接受

暂时只想到了这两种方案，和后台商量了一下，具有可实施性，于是采用该方案。

方案分析：

1. 问题的根源是一次性渲染太多数据导致卡顿，那么第一次加载的数据就需要找到一个既能最大限度满足业务需求，又能无感加载的临界值，最终我选了300条
2. 输入中文搜索时传递queryName作为模糊查询条件
3. 如果通过搜索条件勾选了300条以后的数据，失去焦点，重新获取焦点时，需要将已勾选的数据放到300条数据的最前面，方便用户查看和反选，此时需要用已选择数据的id结合作为查询条件queryIds
4. 编辑时后台只会返回新增时添加项对应的id集合，要正确显示对应的name值，需将id集合作为参数请求列表数据，如果不加参数默认返回前300条数据，如果id里有300之后的数据，则不会正确展示。第一次新增时无需传参。

基于以上分析，开始写代码

<!--  -->
<template>
  <div class="container">
    <el-select 
    v-model="selectVal"
    filterable
    multiple
    clearable
    collapse-tags
    remote
    reserve-keyword
    :remote-method='remoteMethod'
    @focus="focus"
    >
      <el-option v-for="(item, index) in options" :key="index"
      :label='item.label'
      :value='item.id'
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectVal: [],
      options: [
        // {
        //   id: 1,
        //   label: 'one'
        // },
        // {
        //   id: 1,
        //   label: 'one'
        // }
      ]
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(queryName, queryIds) {
      this.$api('api/get', {
        queryName: queryName || '',
        queryIds: queryIds || '',
      }).then(res => {
        this.options = res.data
      }).catch(err => {
        // dosomething
      })
    },
    remoteMethod(query) {
      // 输入文字模糊搜索，覆盖旧数据
      this.getData(query)
    },
    focus(event) {
      if(!event.sourceCapabilities) return // 如果是勾选或反选下拉选项
      if(!event.target.value) { // 输入框没有搜索条件时触发
        this.getData(undefined, this.selectVal)
      } 
    }
  }
}

</script>
<style lang='scss' scoped>
</style>

focus函数是用来解决问题3或者编辑时获取焦点的，但是element-ui的select中点击选项时会触发focus方法，对比了正真的focus和点击，发现只有event.sourceCapabilities值可以区分，便用于区分这两个事件；如果有搜索条件时也不触发id搜索，只触发默认的remoteMethod即可

新增数据的时候已经可以用了，编辑的时候就会遇到问题4，此时需要用返回的id集合作为参数请求下拉数据，以正确展示已选数据

data () {
    return {
      selectVal: [],
      options: [
        // {
        //   id: 1,
        //   label: 'one'
        // },
        // {
        //   id: 1,
        //   label: 'one'
        // }
      ],
      type: 'edit'
    };
 },
mounted() {
    this.initDialog()
  },
  methods: {
    initDialog() {
      this.getEditInfo(this.type).then(ids => {
        this.selectVal = ids
        this.getData(undefined, ids)
      })
    },
    getEditInfo(type) {
      return new Promise((resolve, reject) => {
        if(type === 'edit') { // 编辑
          this.$api('api/getInfo', {}).then(res => {
            let ids = res.data
            resolve(ids)
          }).catch(err => {
            // dosomething
          })
        }else {
          resolve()
        }
      })
    },
    getData(queryName, queryIds) {
      this.$api('api/getOptions', {
        queryName: queryName || '',
        queryIds: queryIds || '',
      }).then(res => {
        this.options = res.data
      }).catch(err => {
        // dosomething
      })
    },
    remoteMethod(query) {
      // 输入文字模糊搜索，覆盖旧数据
      this.getData(query)
    },
    focus(event) {
      if(!event.sourceCapabilities) return // 如果是勾选或反选下拉选项
      if(!event.target.value) { // 输入框没有搜索条件时触发
        this.getData(undefined, this.selectVal)
      } 
    }
  }

这样就可以满足大数据加载的需求了