要实现一个带
过滤器
筛选的多数据下拉列表，可以在之前的示例代码的基础上加上
过滤器的逻辑。下面是一个简单的示例代码：
```html
<template>
<div>
<
el-
select v-mod
el="
selectedValue" filterable placeholder="请选择" @visible-change="handleVisibleChange">
<
vue-virtual-scroll-list :size="30" :remain="10" :bench="3" :items="visible
Options" :key-fi
eld="'value'" @scroll-to="scrollTo">
<
el-
option v-for="
option in visible
Options" :key="
option.value" :lab
el="
option.lab
el" :value="
option.value"></
el-
option>
</
vue-virtual-scroll-list>
</
el-
select>
</div>
</template>
<script>
import
Vue from '
vue'
import
VueVirtualScrollList from '
vue-virtual-scroll-list'
import {
ElSelect,
ElOption } from '
element-ui'
Vue.use(
VueVirtualScrollList)
Vue.use(
ElSelect)
export default {
components: {
VueVirtualScrollList,
ElSelect,
ElOption
},
data() {
return {
options: [], // 所有选项
visible
Options: [], // 可见选项
selectedValue: null, // 已选
中的值
lastScrollIndex: 0, // 上次滚动的索引
filterText: '' //
过滤文本
}
},
mounted() {
// 模拟获取数据
this.
options = Array.from({ length: 10000 }).map((item, index) => ({
value: index,
lab
el: `选项${index}`
}))
},
computed: {
filter
Options() {
// 根据
过滤文本
筛选选项
return this.
options.filter(
option =>
option.lab
el.includes(this.filterText))
}
},
watch: {
filterText() {
// 每次
过滤文本发生变化时，重新计算可见选项
this.visible
Options = this.filter
Options.slice(0, 30)
this.lastScrollIndex = 0
}
},
methods: {
handleVisibleChange(visible) {
// 当下拉框展开时，初始化可见选项
if (visible) {
this.visible
Options = this.filter
Options.slice(0, 30)
}
},
scrollTo(index) {
// 根据滚动的位置计算需要展示的可见选项
const startIndex = index > this.lastScrollIndex ? this.lastScrollIndex + 1 : index
const endIndex = startIndex + 30
this.visible
Options = this.filter
Options.slice(startIndex, endIndex)
this.lastScrollIndex = index
}
}
}
</script>
```
在上面的代码
中，我们给`
el-
select`加上了`filterable`属性，使其变成可
过滤的下拉框。在`computed`
中计算出
筛选后的选项，然后在`watch`
中监听
过滤文本的变化，每次变化时重新计算可见选项。最终实现了一个带
过滤器
筛选的多数据下拉列表。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1312
