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

关于 Element 组件的穿梭的重构

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

7.5K40

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

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

3.3K20

ThinkPHP5 集成使用 Layui 穿梭(transfer)控件

背景 最近在做后台业务处理时,接触到了 Layui 中的一个穿梭 transfer 控件的使用; 个人觉得效果还是挺满意的; 但是毕竟是在 ThinkPHP5 框架下进行的集成,不能不适合部分同行理解哦...不过,还是在此进行整理一番,欢迎指摘 … Layui-穿梭官方文档 框架: ThinkPHP5.1.2 系统: Nginx/centOS 浏览器:Google ①....设计思路理解 > 通过提供的作者列表,点击后,发送 ajax 请求; > 获取返回的 json 数据 —— 作者的文章; > 然后,动态调用 transfer.reload()方法,赋值穿梭数据...Javascript 代码 此处提过核心的 js 代码,主要都是根据自己的数据各种转化操作 参见注释信息,应该可以理解我的操作过程 layui.use(['form','transfer'],...var arrSel = seled_videos.split(','); //console.log('arrSel:',arrSel); //显示搜索

2.1K20
领券