Element-plus's el-select realizes bottoming out and loading more (the new version reports errors and traps)

Preface

The new version of element-plus adds an attribute, which defaults to true, so that the drop-down menu is inserted under the body element. That is, .el-select-dropdown is not included by default under .el-select.

Phenomenon

When still following the previous method, encapsulating custom instructions to implement the function of scrolling to the bottom of the el-select drop-down menu and loading more data, an error will be reported.

Original logic:

// 生成全局唯一的class
const uniSelectClass = () => {
  const num = Math.ceil(Math.random() * 100 + 1)
  if (document.getElementById(`qSelect${num}`)) {
    uniSelectClass()
  } else {
    return `qSelect${num}`
  }
}

// directives
const vLoadmore = {
  mounted(el, binding) {
    nextTick(() => {
      const domClass= "." + uniSelectClass() + " .el-select-dropdown .el-select-        dropdown__wrap"
      const element = el.querySelector(domClass)
      element.addEventListener("scroll", () => {
        const { scrollTop, scrollHeight, clientHeight } = element
        const scrollDistance = scrollHeight - scrollTop <= clientHeight
        if (scrollDistance) {
          binding.value()
        }
      })
    })
  },
}

 Report an error

Error causes and solutions

The reason is mentioned in the preface, because .el-select-dropdown is no longer a child element of .el-select, and const element = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap is used again "), the element at this time will be null, resulting in an error.

solve

use