首页 > 其他分享 >el-transffer大数据量页面卡顿优化

el-transffer大数据量页面卡顿优化

时间:2024-04-19 10:12:04浏览次数:27  
标签:el transffer github 数据量 transfer element https

Element transfer 组件数据量大卡顿优化 && 添加虚拟滚动,

几万以内的数据量不会卡顿,用法和element的el-transfer完全一样

安装

npm install el-virtual-transfer --save

使用

import ElTransferVirtual from 'element-transfer-virtual';

1、组件内注册一下
    components: {
        ElTransferVirtual
    }
2、直接使用 Vue.use(ElementTransferVirtualScroll);

  

参考链接

1)https://github.com/GreenHandLittleWhite/blog/issues/15
2)https://github.com/GreenHandLittleWhite/blog/tree/master/el-virtual-transfer
3)https://github.com/raintoway/element/tree/sum


其他可参考项

1)Element-UI的transfer穿梭框组件数据量大解决方案
2)https://github.com/ElemeFE/element/pull/20282
3)https://github.com/ElemeFE/element/issues/2028
4)vue-element-bigdata-table

注:此参考方案亲测为前端优化,同时也要解决数据源数据的获取问题

后端上:根据Key的查找Dictionary、HashTable的效率是高于 List 的, 但是遍历的话则List效率更好。

标签:el,transffer,github,数据量,transfer,element,https
From: https://www.cnblogs.com/ygunoil/p/18145201

相关文章

  • vue+elemtUI获取单行的id
    问题情境: 当对某一行数据做删除或修改操作时,我们往往需要获取该行数据的实体,例如我的表单数据为数据库中brand表的展示,所以我需要得到的是通过点击修改或删除能得到brand.id,从而在method中使用id获取后端的具体brand对象解决方法<body>内这样书写:先在table-column中加入v-s......
  • elasticsearch相关2
    1.数据聚合1.1.聚合的种类聚合常见的有三类:-**桶(Bucket)**聚合:用来对文档做分组-TermAggregation:按照文档字段值分组,例如按照品牌值分组、按照国家分组-DateHistogram:按照日期阶梯分组,例如一周为一组,或者一月为一组-**度量(Metric)**聚合:用以计算一些值,比如:最大值、最小......
  • telegraph + influxdb + grafana 实现交换机流量展示
    实验环境influxdb2:2.7.5telegraf:1.30.1grafana:10.4.2influxdb官方文档见https://docs.influxdata.com/influxdb/v2/,网络上很多文档比较老,可能是v1版本的influxdb。部署方法1:二进制从https://www.influxdata.com/downloads/可以查看不同版本的下载地址下载压缩包并解压、复......
  • DedeCMS让channelartlist支持currentstyle属性
    织梦一二级导航菜单被点击顶级栏目高亮(加class)解决方法,DedeCMS让channelartlist支持currentstyle属性。dedecms默认模板的channelartlist是不支持currentstyle属性的。currentstyle属性在导航中应用的比较多,可以实现循环调用栏目后,当前页<li>标签获得一个class="自定义命名"的......
  • shell系统函数和流程控制
    系统函数:1、简单示例:点击查看代码#!/bin/bashfilename="$1"_log_$(datename+%S)echo$filenamebasename:基本语法:basename[string/pathname][suffix](功能描述:basename命令会删掉所有的前缀包括最后一个('/')字符,然后将左右字符显示出来。basename可以理解为路......
  • element-ui 时间选择器
    需求:时分秒的选择,限制选择:自当前时间6个月的内的时间<el-date-pickerv-model="duration"type="datetimerange"range-separator="~":start-placeholder="this.$t('templateManag......
  • ElasticSearch
    分布式搜索技术倒排索引ElasticSearch采用倒排索引1、文档(document):每条数据就是一个文档2、词条(term):文档按照语义分成的词语。不可重复MySQL擅长事务类型操作,可以确保数据的安全和一致性。ElasticSearch擅长海量数据的搜索、分析、计算。单机安装dockernetwor......
  • intel网卡MAC地址刷写方法
    准备一个优盘,格式化为FAT32或FAT格式。将eeupdate64e.efi文件拷入U盘根目录中。服务器插U盘开机上电,通过F11键启动菜单选择从UEFIShell启动;输入blk0:进入优盘(一定要带冒号);查看当前网卡端口列表,键盘输入eeupdate64e.efi,然后按ENTER键;其中IntelI350为集成网卡......
  • 对大量ip:port进行批量telnet检测的python脚本
    对大量ip:port进行批量telnet检测的python脚本telnet_test.py#导入socket模块,用于网络通信importsocket#定义一个函数,用于测试Telnet连接是否成功deftest_telnet(ip,port):try:#尝试创建到指定IP和端口的连接socket.create_connection((ip,po......
  • 基于python的文件seek和tell实例解析
    一概念AF.seek(偏移量,whence=相对位置)偏移量大于0的数代表向文件末尾方向移动的字节数小于0的数代表向文件头方向中移动的字节数相对位置0代表从文件头开始偏移1代表从文件当前读写位置开始偏移2代表从文件尾开始偏移Btell函数能够返回指针......