antd 下拉框：根据输入的内容向后台发送请求，并在下拉框中滚动条滚动到底部进行分页

最新推荐文章于 2024-06-27 16:46:56 发布

原创最新推荐文章于 2024-06-27 16:46:56 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

Ant Design of Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Ant Design的下拉框组件中，通过输入内容触发后台请求，并在滚动到底部时实现分页加载。关键设置包括`ref`用于固定下拉框容器，`show-search`支持搜索，`:show-arrow="false"`隐藏箭头，`:not-found-content="null"`隐藏无数据提示，以及`@search`监听搜索事件。同时，`allowClear`属性用于清除已选中的选项。

1、说明：

ref="clientCode" ， :getPopupContainer="() => $refs.clientCode" 是为了将下拉框加载到固定的容器内，为了后面可以获取到（因为默认的是加载到body中的，如果有多个下拉框的话，就没方法确定获取），下拉框节点并进行监听滚动加载

show-search ：为了可以输入内容进行搜索

:show-arrow="false" ：隐藏下拉标志

:not-found-content="null" ：没有数据的时候不显示为空的提示框

   @search="clientCodeChange" ：调用搜索方法

       allowClear ：默认会选中上一次的结果，所以要使用这个属性进行清空

<div ref="clientCode" id="clientCode">
 <a-select
     show-search
     :show-arrow="false"
     v-decorator="['client_code']"
     placeholder="请输入客户编号"
     :not-found-content="null"
     @search="clientCodeChange"
     :getPopupContainer="() => $refs.clientCode"
     allowClear
 >
  <a-select-option v-for="item in clientNumSource" :key="item" :value="item">{{item}}</a-select-option>
   </a-select>
</div>

2、data中

clientNumCurPage:1, // 客户编号当前页数
      
clientNumSource: [], // 客户编号数据

3、方法



clientCodeChange ( c ) { // 客户编号改变
    if ( c ) {
      this.clientNumCurPage = 1 // 当前页码恢复为1
      let formData = new FormData()
      formData.append('select_items[client_code]', c+',1,10' ) // 1当前页数，10条数
      filterItems( formData ).then(res => { //  调用后台接口
        let sourceD = res.data.data.client_code.data
        if ( sourceD.length > 0 ) {
          let sourceDArr = []
          sourceD.forEach( item => {
            if ( sourceDArr.indexOf(item.serial_no) < 0 ) { // 去重
              sourceDArr.push( item.serial_no )
            }
          })
          this.clientNumSource = sourceDArr
          let that = this
          setTimeout(function(){  // 这里延迟是为了避免下拉框还没加载到页面
          document.querySelector('#clientCode .ant-select-dropdown-menu').addEventListener('scroll', el => that.scrollFun(el, c, 1))
          },1000)
        }
      })
    }
   },


   scrollFun ( el, c, type) { // 监听滚动加载 , el: dom元素， c 页面上输入的值， type ： 1客户编号 2 客户名称...因为有多个需要监听的下拉框
    const offsetHeight = el.target.offsetHeight
    const scrollTop = el.target.scrollTop
    const scrollHeight = el.target.scrollHeight
    if ((offsetHeight + scrollTop) - scrollHeight >= 0) {
      let formData = new FormData()
      if ( type == 1) { // 1客户编号
        this.clientNumCurPage = this.clientNumCurPage + 1
        formData.append('select_items[client_code]', c+','+this.clientNumCurPage+',10' ) // 1当前页数，10条数
        filterItems( formData ).then(res => { //  调用后台接口
          console.log(res)
          let sourceD = res.data.data.client_code.data
          if ( sourceD.length > 0 ) {
            let sourceDArr = []
            sourceD.forEach( item => {
              if ( sourceDArr.indexOf(item.serial_no) < 0 ) { // 去重
                sourceDArr.push( item.serial_no )
              }
            })
            this.clientNumSource = this.clientNumSource.concat(sourceDArr)
          }
        })
      } 

    }
   },