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

<!--  -->
<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>

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)
      } 
    }
  }