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>