ant-design-vue select 可搜索下拉加载更多

1.搜索

配置 showSearch 属性，支持单选模式可搜索。

filterOption 是否根据输入项进行筛选。

当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。

filterOption(input, option) {
  return option.componentOptions.children[0].text.includes(input)
},

2.搜索与远程数据结合

这里需要介绍 select 组件的 search 事件。

当用户输入或者选择下拉框时，我们会用的上述事件进行远程查询数据。

handleSearch (value) {
  if (this.timer) clearTimeout(this.timer)
  this.timer = setTimeout(() => {
    this.clearData() // 清除数据
    this.fecth(this.method) // 调用接口
    clearTimeout(this.timer)
  })
}

进阶：对于远程搜索需要节流控制，请求 loading 加载状态等功能。

import debounce from 'lodash/debounce';

export default {
  data () {
    this.fetch = debounce(this.fetch, 800)
  },
  methods: {
    fetch () {
      this.loading = true
      // 接口调用
      this.loading = false
    }
  }
}

3.下拉加载更多数据

ant-design-vue 提供了 popupScroll 事件，下拉列表滚动时的回调。

handlePopScroll (e)) {
  const { scrollHeight, scrollTop, clientHeight } = e.target
  if (scrollHeight - scrollTop === clientHeight) {
    this.paging.currentNo++
    this.fetch(this.method) // 调用接口
  }
}

4.支持 label 和 value 可配置

对于不同的接口返回的数据字段是不一致的，为了放入封装后的 select 组件中，需要配置 label 和 value。

fetch () {
  const newData = data.map(item => {
    item.name = item[this.nameModel]
    item.value = item[this.valueModel]
    return item
  })
  this.optionsList = [].concat(JSON.parse(JSON.stringify(this.optionsList)), ...newData)
}

这里的 this.nameModel 和 this.valueModel 则为传入的 label 和 value 显示的字段。

<a-select>
  {
    optionsList.map(option => {
      return <a-select-option value={option.value}>{option.name}</a-select-option>
    })
  }
</a-select>