el-select无限滚动 （后端一次性给出太多数据造成页面卡顿）

 directives: {
    'el-select-loadmore': (el, binding) => {
      // 获取element-ui定义好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      if (SELECTWRAP_DOM) {
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,
           *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (condition) binding.value()
        })
      }
    }
  }

   <el-table-column label="设备品牌" align="center">
        <template slot-scope="scope">
          <el-input :disabled="disabled" v-show="scope.row.hidden" v-model="scope.row.brandName" 
                 @focus="focusInput(scope.$index, scope.row)">
          </el-input>
          <el-select v-show="!scope.row.hidden" class="order-cover-select"  v-model="scope.row.brandId"
               @visible-change="visibleChange" clearable placeholder="请选择品牌"
               filterable  collapse-tags v-el-select-loadmore="loadmore" 
               :filter-method="filterVmModel">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>

 focusInput (id, row) {
      row.hidden = false
      this.filterVmModel(row.brandName)
    }

 visibleChange (flag) {
      if (flag) {
        this.filterVmModel()
      }
    },

loadmore (firstTag) {
  // 筛选时下拉不触发分页
  if (!this.filterText) {
    if (!firstTag) {
      this.query.page++
    }
    // 前端分页简单版本
    // 分页开始坐标
    const begin = this.query.limit * (this.query.page - 1)
    // 分页结束坐标
    const end = (this.query.limit * (this.query.page - 1)) + this.query.limit
    // 这里使用slice 进行分页
    this.options.push(...this.brandList.slice(begin, end))
  }
},

  filterVmModel (value) {
      this.filterText = value
      // 筛选数据
      if (value) {
        this.options = this.brandList.filter(item => {
          if (item.name && item.name.indexOf(value) !== -1) {
            return true
          } else {
            return false
          }
        })
      } else {
        // 直接赋值会连续触发 loadmore 分页事件
        this.options = []
        this.$nextTick(() => {
          this.options = this.brandList.slice(0, this.query.limit * this.query.page)
        })
      }
    },