[Guía de desarrollo de pila completa] Personalice las etiquetas AntDesignVue Select para implementar la carga diferida y la paginación

  En las necesidades comerciales reales, cuando el cuadro desplegable necesita mostrar demasiadas opciones, debemos implementar la paginación de carga diferida. Para personalizar la etiqueta Seleccionar en Ant Design Vue e implementar la paginación de carga diferida, aquí usamos agregar un detector de desplazamiento para cargar datos de paginación cuando el cuadro desplegable se desplaza hacia la parte inferior para implementar la paginación de carga diferida.

1. Primero, configure @popupScroll en el componente a-select. Este método se utiliza para manejar la carga diferida y la lógica de paginación y actualizar dinámicamente una opción de selección.

            <a-select
                :value="selectedVal"
                placeholder="请选择数据源"
                allow-clear
                show-search
                :filter-option="false"
                @popupScroll="handlePopupScroll"
                @search="filterOpts"
                @change="clickLdapOpt"
                :not-found-content="null">
                <a-select-option v-for="item in datasourceList" :key="item.id" :value="item.id">
                  {
   
   { item.datasourceName }}
                </a-select-option>
           </a-select>

2. Defina los parámetros de paginación, identifique el número de página actual y el número de elementos por página, etc. durante la paginación.

                // 获取数据源搜索的查询条件
                selectedVal: undefined, // select组件绑定的value值
                pageNo: 1, // 当前加载的页数
                pageSize: 10, // 每页加载的数据个数
                datasourceCount: 0, // 服务器返回的响应信息
                datasourceList: [], // 服务器返回的响应信息中的搜索匹配项数据
                timer: null // 定时器，控制请求频率

3. Ejecute un método para cargar datos paginados de forma asincrónica al desplazarse hacia abajo.

            getDatasourceList () {
              const that = this
              that.listLoading = true
              queryDatasourceList({
                datasourceName: that.selectedVal,
                current: that.pageNo,
                size: that.pageSize
              }).then(response => {
                that.datasourceCount = response.count
                if (that.datasourceList.length <= that.datasourceCount) {
                  that.datasourceList = that.datasourceList.concat(response.data)
                }
                that.listLoading = false
              })
            },
            // 文本框值变化时回调
            filterOpts (val) {
              this.selectedVal = val
              if (this.selectedVal) {
                clearTimeout(this.timer)
                this.datasourceList = []
                this.pageNo = 1
                this.pageSize = 10
                this.timer = setTimeout(() => {
                  this.getDatasourceList()
                }, 500)
              }
            },
            // 列表滚动时加载数据
            handlePopupScroll (e) {
              const target = e.target
              // 判断滚动条滚动到底部时才加载
              if ((target.scrollTop + target.offsetHeight === target.scrollHeight) && (this.pageNo * this.pageSize < this.datasourceCount)) {
                this.pageNo += 1
                this.getDatasourceList()
              }
            },
            // 选中 option 调用
            clickLdapOpt (val) {
              this.selectedVal = val
              this.listQuery.datasourceId = val
            },