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

文章目录

1、简单模糊查询：

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

:filterOption=“filterOption”showSearch //点击可输入内容，搜索option对应的value的值:allowClear=“true” //支持清空// 下拉模糊查询filterOption(input, option) {return (ponentOptions.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 (ponentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);},}}</script>

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

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

<template><a-form layout="inline"><a-form-item label="业务"><a-selectv-model="selectedVal":loading="dataLoading"placeholder="输入搜索内容"style="width: 240px;"show-searchoption-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 = truefetchBusinessList().then(res => {this.dataLoading = falsethis.oriDataList = res.result // 该接口返回的数据存放在res.result（根据实际自行修改）this.renderedOptions = this.oriDataList.slice(0, LOAD_NUM)})},// 文本框值变化时触发 -- 从数据源中过滤出含搜索内容的数据，并取过滤结果的前n条作为下拉列表的可选项handleSearch (val) {this.searchVal = vallet filterList = []if (val) {filterList = (this.oriDataList).filter(item => item.indexOf(val) > -1)} else {filterList = this.oriDataList}this.filterDataList = filterListthis.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>