以下是一个简单的
vue element s
elected下拉框虚拟列表组件，可以根据需求进行
修改和扩展：
```
vue
<template>
<
el-s
elect v-mod
el="s
elected" placeholder="请选择" @visible-change="handleVisibleChange">
<
el-option
v-for="(item, index) in options"
:key="item.value"
:l
abel="item.l
abel"
:value="item.value"
:
disabled="item.
disabled"
:style="getOptionStyle(index)"
></
el-option>
</
el-s
elect>
</template>
<script>
export default {
data() {
return {
s
elected: null,
options: [],
visibleOptions: [],
itemHeight: 36, // 每一项的高度
visibleItemCount: 10, // 可见项的数量
bufferItemCount: 3, // 缓冲项的数量，用于提高滚动性能
startIndex: 0, // 可见项的起始索引
endIndex: 0, // 可见项的结束索引
scrollTop: 0, // 滚动的距离
scrollHeight: 0, // 滚动区域的高度
lastScrollTime: 0, // 上一次滚动的时间戳
}
},
computed: {
totalHeight() {
return this.itemHeight * this.options.length
},
},
watch: {
options: {
handler() {
this.updateVisibleOptions()
},
deep: true,
},
scrollTop() {
this.updateVisibleOptions()
},
},
mounted() {
this.updateVisibleOptions()
window.addEventListener('resize', this.handleWindowResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
// 更新可见选项
updateVisibleOptions() {
// 计算可见项的起始索引和结束索引
const scrollTop = Math.max(0, Math.min(this.scrollTop, this.totalHeight - this.clientHeight))
const startIndex = Math.floor(scrollTop / this.itemHeight)
const endIndex = Math.min(
this.options.length - 1,
startIndex + this.visibleItemCount + this.bufferItemCount * 2 - 1
)
const visibleOptions = this.options.slice(startIndex, endIndex + 1)
// 更新状态
this.startIndex = startIndex
this.endIndex = endIndex
this.visibleOptions = visibleOptions
},
// 获取选项的
样式
getOptionStyle(index) {
const style = {}
if (index < this.startIndex - this.bufferItemCount || index > this.endIndex + this.bufferItemCount) {
style.
display = 'none'
}
else {
style.
display = 'block'
style.height = this.itemHeight + 'px'
style.transform = `translateY(${(index - this.startIndex) * this.itemHeight}px)`
}
return style
},
// 获取滚动区域的高度
getScrollHeight() {
return Math.min(this.totalHeight, this.visibleItemCount * this.itemHeight)
},
// 处理下拉框的可见性变化
handleVisibleChange(visible) {
if (visible) {
this.scrollHeight = this.getScrollHeight()
this.lastScrollTime = Date.now()
}
},
// 处理窗口大小变化
handleWindowResize() {
this.scrollHeight = this.getScrollHeight()
},
// 处理滚动事件
handleScroll(event) {
const now = Date.now()
if (now - this.lastScrollTime > 100) {
this.scrollTop = event.target.scrollTop
this.lastScrollTime = now
}
},
},
}
</script>
<style scoped>
/* 设置下拉框的
样式 */
.
el-s
elect__caret {
display: none;
}
.
el-s
elect-dropdown .
el-scrollbar__wrap {
max-height: none !important;
}
.
el-s
elect-dropdown .
el-scrollbar__thumb {
background-color: #ccc;
border-radius: 4px;
}
.
el-s
elect-dropdown .
el-scrollbar__thumb:hover {
background-color: #aaa;
}
</style>
```
使用方法：
```
vue
<template>
<div>
<virtual-s
elect :options="options" v-mod
el="s
elected" />
</div>
</template>
<script>
import VirtualS
elect from './VirtualS
elect'
export default {
components: {
VirtualS
elect,
},
data() {
return {
s
elected: null,
options: [
{ l
abel: '选项一', value: '1' },
{ l
abel: '选项二', value: '2' },
{ l
abel: '选项三', value: '3' },
// ...
],
}
},
}
</script>
```
2239
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
