首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    关于 Element 组件的穿梭的重构

    备选框自动过滤已选) 选择对应仓库,自动勾选仓库对应的省,取消就反选 选择同样地区,选择省级或市级,若该对象下面的子级(市级或区级)已有选择,就自动合并为一个父级(省级或市级) 设计 应用 Element 组件穿梭的...展示数据和总体数据分别保存在不同变量,另外分别保存用于过滤的数据的数组,一级一级地联动,移除、增加、搜索的数据展示 相关连接 github:https://github.com/Krryxa/my-transfer 数据量庞大的穿梭重写...公司业务中数据量太大,由于测试环境只有 400+ 条数据,而线上环境达到 3000+ 数据量,不是一个级别,这么多数据放在 Element 的穿梭组件,响应起来十分慢,没办法,只能重写 实现效果图...[asop77ro04.jpeg] 重写穿梭组件,使其变成分页形式加载,具体改变的点有: 从接口获取的 3000+ 的数据,放在临时变量,以分页形式展示 渠道的搜索,做成在所有数据里搜索,不是在当前分页的数据里搜索...(全部数据和仅作展示的数据存放在不同变量) 为了优化全选的速度,全选只在当前页里的全选 穿梭左右两个的联动 关键点 分页形式,关键点判断临界点 搜索数据,监听 keyword 的变化,从全局数据搜索

    7.6K40

    数据量庞大的分页穿梭实现

    [8v38d5pes7.png] 写个分页的穿梭,从而解决数据量庞大的问题 我之前写过一篇博客:关于 Element 组件的穿梭的重构 介绍并实现的方法 但是第二个分页的 demo 没有,在上一家公司匆匆解决后...也是给自己一个挑战 进入正题 看实现效果图 [q1lez7emuv.jpeg] 既然之前博客谈过,这里就不仔细谈了,主要放主要的源码 问题 Element 官方组件目前(==18年==)明显对于多选==三级联动的穿梭...==没有解决方案,也对==数据量庞大的穿梭==没有结局方案(各位看官可以试一下,放入几千条数据到穿梭,卡到爆...)...(全部数据和仅作展示的数据存都是存放在不同变量) 全选只在当前页里的全选 穿梭左右两个的联动 关键点 每个作为一个子组件(组件化思想) 分页关键判断临界点 搜索,监听 keyword 的变化,传递到父组件搜索...(考虑到是在搜索过后点击的) 中间的左右箭头(加入已选和移除已选)放在父组件控制数据流动 数据流动:子备选框 -> 父组件 -> 子已选框 (移除已选相反) 源码 Districts.vue(包裹两个穿梭的父组件

    3.4K20

    krry-transfer ⏤ 基于 element 的升级版穿梭组件发布到 npm 啦

    博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭组件重构的博客...关于 Element 组件的穿梭的重构,当时还有一些同学直接通过微信询问很多关于这个组件的问题 去年在上家公司就重构过的穿梭,一直懒得封装成一个 Vue 组件发布到 npm,现在趁着目前比较闲,就这几天继续完善和优化...、迭代更新 + 封装,终于发布啦~ krry-transfer 基于 Element UI 的升级版穿梭组件 多级多选穿梭(常用于省市区三级联动) 针对数据量庞大的分页穿梭 Example...区分别在备选框新增这些数据 当父级勾选多个数据,下级方框展示的数据为最后勾选父级的子级集合 当多个勾选的父级逐个取消勾选,下级方框展示的数据为上一次勾选父级的子级集合 支持搜索 kr-paging 数据量庞大的分页穿梭...实现分页 搜索,在所有数据里搜索(不是在当前分页的数据里搜索),这样就不用在每个分页都搜索一次;搜索后的结果也会自动分页 全选只在当前页里的全选 穿梭左右两个的联动 Install & Use npm

    1.6K20
    领券