<template>
  <el-select
    popper-class="more-tag-data"
    v-model="tagId"
    filterable
    placeholder="请选择"
    @focus="focusTag"
  >
    <el-option
      v-for="(item, index) in taskTagLists"
      :key="index"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      tagPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      taskTagLists: []
    }
  },

  created() {
    getTmpList({
      pageNum: this.tagPage.currentPage,
      pageSize: this.tagPage.pageSize
    }).then(res => {
      this.tagPage.total = res.data.total
      this.taskTagLists = res.data.list
    })
  },

  methods: {
    focusTag() {
      // 获取dom节点
      const domElementNode = document.querySelector('.more-tag-data .el-select-dropdown__wrap')
      // 注册下拉滚动事件
      domElementNode.addEventListener('scroll',  ()=>{
        const isBottom = domElementNode.scrollHeight - domElementNode.scrollTop <= domElementNode.clientHeight
        if (isBottom) {
          this.loadMore()
        }
      })
    },

    loadMore() {
      if(this.tagPage.currentPage * this.tagPage.pageSize < this.tagPage.total) {
        this.tagPage.currentPage ++
        this.getTageValue()
      }
    },

    getTageValue() {
      getTmpList({
        pageNum: this.tagPage.currentPage,
        pageSize: this.tagPage.pageSize
      }).then(res => {
        this.taskTagLists = this.taskTagLists.concat(res.data.list)
      })
    }
  }
}
</script>

注意：

        因为select组件在默认情况下是display:none的状态，所以不能把监听滚动事件放到mounted内，会获取不到元素class。