V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qq309187341
V2EX  ›  Vue.js

求推荐一个 Vue2.X 版本 select 下拉选择器需要支持虚拟列表功能

  •  
  •   qq309187341 · 2022-10-15 12:54:52 +08:00 · 2263 次点击
    这是一个创建于 761 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,项目中下拉列表选择器可能有上万条选项,使用 element UI 的 select 渲染这么多很卡顿。网上也有一些也有一些基于 el-select 的基础上封装加入了虚拟列表。但是都有一些问题。 有没有大哥有比较完善的库推荐。需要支持 vue2.x 版本的。

    11 条回复    2022-11-11 15:22:22 +08:00
    rabbbit
        1
    rabbbit  
       2022-10-15 13:11:19 +08:00
    支持下拉功能的不清楚
    一般的虚拟列表有 vue-virtual-scroller vxe-table 你可能需要自己结合 element 封装。
    能改需求吗?上万条根本就不可能手选,应该添加搜索功能,单次加载 100 条,滑动到列表底部时继续加载。
    qq309187341
        2
    qq309187341  
    OP
       2022-10-15 13:15:09 +08:00
    @rabbbit 远程搜索其实也行的。只是还存在一个问题,当编辑进入的时候,需要回显。就无法满足的。
    rabbbit
        3
    rabbbit  
       2022-10-15 13:18:25 +08:00
    “当编辑进入的时候,需要回显”
    这里我没看懂,能详细讲讲吗?
    TianQian
        4
    TianQian  
       2022-10-15 13:29:12 +08:00
    @qq309187341 在前端进行分页就能解决回显的问题
    bojackhorseman
        5
    bojackhorseman  
       2022-10-15 14:00:29 +08:00 via iPhone
    建议用分页吧,我最近也遇到了 select 搜索的需求,本来想用无限下拉列表的,但是感觉体验不太好,用的 vue-select 这个组件库加 element 的分页组件,感觉好多了。
    bojackhorseman
        6
    bojackhorseman  
       2022-10-15 14:04:09 +08:00 via iPhone
    回显问题,vue-select 组件支持 value 传对象,即使 options 里没有已选项也不影响 select 显示。
    Gaays
        7
    Gaays  
       2022-10-18 16:26:20 +08:00
    @bojackhorseman 分页 select ,如果是在创建表单后,修改表单数据,如何定位到 select 框的数据在分页第几页呢?是后端给映射数据吗?我遇到的都是只能前端手动搜一遍,感觉不太合适。
    CziL
        8
    CziL  
       2022-10-23 17:19:18 +08:00
    我最近也遇到同样的问题,所以自己写了一个,基于 element-ui ,vue2 ,支持回显(会自动滚动到该绑定数据),有虚拟滚动条,体验效果的 vue3 的 element-plus 的 select-v2 一样,支持搜索和远程搜索,不过目前还没打算开源,等后续把单元测试写完会考虑开源这个组件
    fuchish112
        9
    fuchish112  
       2022-10-26 16:18:07 +08:00
    我也需要,有没有类似这种的 https://lolicode.gitee.io/scui-doc/demo/#/vab/tableselect
    CziL
        10
    CziL  
       2022-11-04 11:56:39 +08:00
    qq309187341
        11
    qq309187341  
    OP
       2022-11-11 15:22:22 +08:00
    @CziL 是的。你这个 2.18.15 版本你们自己 fork 之后自己迭代的吧!!!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5830 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 01:50 · PVG 09:50 · LAX 17:50 · JFK 20:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.