el-select数据过多的解决(纯前端)

2024-03-10 7306阅读

前言

el-select据过多这个问题应该很多人都遇到过,在生产环境中数据几百、几千条是比较常见的。当数据过多时,就会造成浏览器卡顿,如果客户电脑性能不行,浏览器直接卡***也有可能。

解决

先说一下现在项目中遇到的两种解决方案:

原解决方案

添加分页条

这种方案好像有点问题,具体什么问题忘记了,感兴趣的可以看一下:element ui 下拉框分页(下拉框数据过多)

el-select数据过多的解决(纯前端) 第1张

滚动懒加载

这种方式是我的一个同事写的,代码就不放了。原理就是一开始加载20条数据,当列表滚动到底部的时候,加载下一个20条数据。

先解决方案

最近在思考,卡顿的根本原因就是数据太多了。那么我能否一下子把所有数据都请求过来,但是我每次就显示20条数据,当我向下滚动时我就渲染下一个20条数据。

当然有一些问题是需要解决的:

  • 数据回显的问题。当下拉绑定的值在下拉项里匹配不到时就是显示绑定的值,而不是对应的名称。目前考虑:这20条数据里如果有这个值则不处理;没有这个值,则往数组里添加上。这样会有20条数据和21条数据两种情况
  • 模糊搜索的话,也是每次显示20条数据
  • 数据切换的话打算通过鼠标滑轮事件来实现

    示例

    肯定会有些问题,但是作为一个demo就懒得处理了,纯粹是提供一种思路

    el-select数据过多的解决(纯前端) 第2张

        
    import { ref, onMounted, nextTick } from "vue"; // 绑定的值 const selectValue = ref(22); // 下拉显示的值 const showOptions = ref([]) // 下拉所有的值 const allOptions = ref([]) // 每次显示的条数 const showCount = 20 // 当前页 const current = ref(1) // 总页数 const total = ref(0) // loading动画 const loading = ref(false) // 外层容器 const outer = ref() // 上一次滚动的值 const lastScrollTop = ref(0) // 用于记录中间值 const tempList = ref([]) onMounted(() => { // 假设下拉值共用100条数据 for (let i = 1; i allOptions.value.push({ value: i, label: 'Item ' + i }) } tempList.value = allOptions.value // 计算总页数 total.value = Math.ceil(200 / showCount) updateShowOptions() }) // 更新下拉显示的值 const updateShowOptions = () = { const startIndex = (current.value - 1) * showCount showOptions.value = tempList.value.slice(startIndex, startIndex + showCount); // 处理一下绑定值的回显 handleBindValue() } // 判断当前绑定值是否在下拉里 const handleBindValue = () => { // 有绑定值但是绑定值不在下拉里 if (selectValue.value && !showOptions.value.find(e => e.value == selectValue.value)) { // 找到该值对应的下拉 let item = allOptions.value.find(e => e.value == selectValue.value) showOptions.value.push(item) } } // 自定义搜索 const myFilter = (val) => { // 这一块应该也是固定显示20条数据,但是没想好怎么处理,并且筛选后的数据也会少一些 // console.log("搜索:", val) tempList.value = allOptions.value.filter(e => e.label.includes(val)) // 重置当前页 current.value = 1 // 更新总条数 total.value = Math.ceil(tempList.value.length / showCount) updateShowOptions() } // 下拉框显示处理 const handleVisible = (val) => { console.log("显示了:", val) if (val) { // 记录向下滚动的上一次值 lastScrollTop.value = 0; nextTick(() => { const out = document.querySelector('.el-select-dropdown .el-select-dropdown__wrap') outer.value = out console.log(out, out.clientHeight) const inner = document.querySelector('ul.el-scrollbar__view') console.log(inner, inner.clientHeight) if (inner.clientHeight > out.clientHeight) { // 说明存在滚动条,可以滚动,添加滑轮滚动事件 outer.value?.addEventListener('wheel', handleWeel) } }) } else { // 重置下拉项 current.value = 1 // 更新总条数 total.value = Math.ceil(tempList.value.length / showCount) tempList.value = allOptions.value } } // 滚动事件 const handleWeel = event => { if (event.deltaY > 0) { // console.log('向下滚动', out.scrollTop); if (lastScrollTop.value != outer.value.scrollTop) { // 说明还能往下滚 lastScrollTop.value = outer.value.scrollTop } else { // 当不变时,说明滚动底部了,显示下一页的值 if (lastScrollTop.value == outer.value.scrollTop && current.value { loading.value = false }, 500) } } } else if (event.deltaY 1) { // 滚动到0说明到头了,显示上一页的数据 current.value -= 1; console.log("滚动到头了加载上一页") loading.value = true // 滚动条滚回顶部 outer.value.scrollTop = 10 setTimeout(() => { loading.value = false }, 500) } } // 更新显示的值 updateShowOptions() }

    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]