【AntD+Vue】使用Select模糊查询（模糊查询及渲染大量数据卡顿问题）：

---

1、简单模糊查询：

适合数据较少，接口获取全部下拉数据较快

:filterOption=“filterOption”
showSearch //点击可输入内容，搜索option对应的value的值
:allowClear=“true” //支持清空

// 下拉模糊查询
filterOption(input, option) {
  return (
    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  );
},

 <a-form-model-item label="货名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="variety">
     <a-select v-model="model.variety" showSearch allowClear optionLabelProp="label" placeholder="请选择货名" style="width: 100%;" :filter-option="filterOption">
        <a-select-option v-for="item in varietyList" :key="item.id" :value="item.id" :label="item.variety">
            {{ item.variety }}
        </a-select-option>
     </a-select>
</a-form-model-item>


<script>
import { getAction,  httpAction} from '@/api/manage'

export default {
  name: 'Variety',
  data() {
    return {
      model: {},
      url: {
        variety: '/kd/variety/list', // variety-查询货名列表
      },
      varietyList: [],//货名
    }
  },
  created() {
    this.getDictList()
  },
  methods: {
  	//获取货品的全部下拉数据
    getDictList() {
      getAction(this.url.variety).then(res => {
        if (res.success) {
          this.varietyList = res.result.records || res.result.list//注意：获取到的是全部下拉数据
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    // 下拉模糊查询（这里不需要修改，复制过去即可）
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>

2、渲染大量数据卡顿问题：

Antd select框渲染大量数据会造成卡顿问题，点击下拉很长时间才显示

<template>
 <a-form layout="inline">
    <a-form-item label="业务">
      <a-select
        v-model="selectedVal"
        :loading="dataLoading"
        placeholder="输入搜索内容"
        style="width: 240px;"
        show-search
        option-filter-prop="children"
        @search="handleSearch"
        @popupScroll="handlePopupScroll"
        @select="handleSelect"
      >
        <a-select-option v-for="item in renderedOptions" :value="item" :key="item">
          {{ item }}
        </a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
</template>

<script>
import debounce from 'lodash/debounce'
import { fetchBusinessList } from '@/api/public' // 根据实际修改
const LOAD_NUM = 30 // 加载条数--可自定义

export default {
  name: 'BaseForm',
  data () {
    return {
      selectedVal: '', // Select框选中的值
      oriDataList: [], // 原数据列表 -- 从接口获取
      dataLoading: false, // 原数据列表的加载状态 -- 接口的响应状态
      searchVal: '', // 搜索的内容
      filterDataList: [], // 过滤的数据列表 -- 从dataList中过滤出含搜索内容的数据
      renderedOptions: [] // 已渲染的下拉列表
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    // 获取数据源，并取数据源的前n条作为下拉列表的可选项
    getDataList () {
      this.dataLoading = true
      fetchBusinessList().then(res => {
        this.dataLoading = false
        this.oriDataList = res.result // 该接口返回的数据存放在res.result（根据实际自行修改）
        this.renderedOptions = this.oriDataList.slice(0, LOAD_NUM)
      })
    },
    // 文本框值变化时触发 -- 从数据源中过滤出含搜索内容的数据，并取过滤结果的前n条作为下拉列表的可选项
    handleSearch (val) {
      this.searchVal = val
      let filterList = []
      if (val) {
        filterList = (this.oriDataList).filter(item => item.indexOf(val) > -1)
      } else {
        filterList = this.oriDataList
      }
      this.filterDataList = filterList
      this.renderedOptions = filterList.length < LOAD_NUM ? filterList : filterList.slice(0, LOAD_NUM)
    },
    // 滚动时触发（防止抖动）
    handlePopupScroll: debounce(function () {
      if (this.searchVal === '') {
        this.loadMoreData(this.oriDataList)
      } else {
        this.loadMoreData(this.filterDataList)
      }
    }, 400),
    // 加载更多数据到select框
    loadMoreData (dataList) {
      const renderedLen = this.renderedOptions.length // 已渲染的下拉列表长度
      const totalLen = dataList.length // 当前数据源的长度
      let addList = []
      if (renderedLen < totalLen) {
        if (renderedLen + LOAD_NUM <= totalLen) {
          addList = dataList.slice(renderedLen, renderedLen + LOAD_NUM)
        } else {
          addList = dataList.slice(renderedLen, renderedLen + (totalLen % LOAD_NUM))
        }
        this.renderedOptions = (this.renderedOptions).concat(addList)
      }
    },
    // 被选中时调用，参数为选中项的 value (或 key) 值
    handleSelect (val) {
      if (this.searchVal) {
        const selectedArr = (this.oriDataList).filter(item => item === val) // 从数据源中过滤出下拉框选中的值，并返回一个数组
        const restList = (this.oriDataList).filter(item => item !== val) // 从数据源中过滤出其他的值，返回一个数组
        const newList = selectedArr.concat(restList).slice(0, LOAD_NUM) // 将选中的元素放到下拉列表的第一位
        this.renderedOptions = newList // 更新已渲染的下拉列表
        this.oriDataList = selectedArr.concat(restList) // 更新数据源
        this.searchVal = '' // 因为触发handleSelect函数时，会自动清空用户输入的内容。因此，searchVal需要重置。
      }
    }
  }
}
</script>