位置: IT常识 - 正文

vue数据太多导致页面卡顿解决办法(vue解决数据量过大的问题)

编辑:rootadmin
vue数据太多导致页面卡顿解决办法

推荐整理分享vue数据太多导致页面卡顿解决办法(vue解决数据量过大的问题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue数据太多卡死,vuex存储大量数据会卡吗,vue解决数据量过大的问题,vue大量数据刷新怎么优化,vue处理大量数据,vue处理大量数据,vue处理大量数据,vue处理大量数据,内容如对您有帮助,希望把文章链接给更多的朋友!

需求:查询统计表格页面操作卡顿迟缓

原因:查询一天内某个接口每分钟调用量,由于一次返回几百列数据(60*24),并且不做分页,加载过多数据之后,造成页面卡顿,操作延迟

解决办法:vue数据太多导致页面卡顿解决办法(vue解决数据量过大的问题)

1.和后端沟通进行页面分页加载(本次需求列数过多,不适用)

2.使用umy-ui库中的表格代替el-table

u-table不支持展开行,需要展开行使用ux-gridux-grid解决列多 行多导致卡的情况u-table解决行多的情况,不解决列多的情况

下面是ux-grid懒加载展开行的例子:

// main.jsimport 'umy-ui/lib/theme-chalk/index.css'// 引入样式import { UTableColumn, UTable, UxGrid, UxTableColumn } from 'umy-ui' // 按需引入组件Vue.component(UTable.name, UTable)Vue.component(UTableColumn.name, UTableColumn)Vue.component(UxGrid.name, UxGrid)Vue.component(UxTableColumn.name, UxTableColumn)

加上row-id属性,以及展开行tree-config、expand-config ,ux-table-column添加tree-node属性

<template> <!-- 表格 --> <div class="table-container"> <ux-grid ref="plxTable" border :data="tableData" row-id="key" :tree-config="{lazy: true, children: 'children', hasChild: 'hasChildren', loadMethod: load}" :expand-config="{ labelField: 'key', expandAll: false}" > <ux-table-column v-for="(item, index) in tableConfig" :key="index" align="center" :field="item.prop" :title="item.label" :width="tableData.length ? item.width : 'auto'" :fixed="item.fixed" :tree-node="item.prop == 'key'" > <template slot-scope="{ row }"> <span>{{ row[item.prop] }}</span> </template> </ux-table-column> </ux-grid> </div></template>

load 方法里面是后端请求回来的数据,需要return出去

methods: { async load({ row }) { let nodes = [] this.$store.commit('settings/CHANGE_LOADING', true) try { const res = await queryUsersStatistics({ date: this.date, appKey: row.key }) const { success, data } = res if (success && data) { console.log(data) nodes = data.map((item) => { const { key, total, minuteCountTable } = item return { key, total, ...minuteCountTable } }) } this.$store.commit('settings/CHANGE_LOADING', false) } catch (error) { console.log(error) this.$store.commit('settings/CHANGE_LOADING', false) } console.log('nodes', nodes) return nodes } }

3.不采用ui中的表格组件,自定义虚拟表格加载数据(此方法比较复杂,手动实现虚拟表格)

放在下一篇。。。

本文链接地址:https://www.jiuchutong.com/zhishi/283926.html 转载请保留说明!

上一篇:edisk.exe是什么进程 edisk进程是什么文件(edi文件怎么打开)

下一篇:操作系统的类型有哪些(操作系统的类型和比较)

  • 苹果的专注模式在哪里(苹果的专注模式怎么关闭)

    苹果的专注模式在哪里(苹果的专注模式怎么关闭)

  • 微信可以删除朋友圈的评论吗(微信可以删除朋友圈其中一张照片吗)

    微信可以删除朋友圈的评论吗(微信可以删除朋友圈其中一张照片吗)

  • 魅族18的分辨率是多少(魅族18分辨率ppi)

    魅族18的分辨率是多少(魅族18分辨率ppi)

  • 华为p40可以用来控制空调吗(华为p40可以用来刷机吗)

    华为p40可以用来控制空调吗(华为p40可以用来刷机吗)

  • ipad9.7和10.5区别(平板ipad9.7和10.5样子有啥区别)

    ipad9.7和10.5区别(平板ipad9.7和10.5样子有啥区别)

  • 电脑下载的视频怎么改格式(电脑下载的视频怎么传到手机上)

    电脑下载的视频怎么改格式(电脑下载的视频怎么传到手机上)

  • 电脑正在更新怎么取消(电脑正在更新怎么取消让他开机)

    电脑正在更新怎么取消(电脑正在更新怎么取消让他开机)

  • 爱玛原装电池什么牌子(爱玛电动车原装电池怎么样)

    爱玛原装电池什么牌子(爱玛电动车原装电池怎么样)

  • glidecache什么文件夹(giidecache啥意思)

    glidecache什么文件夹(giidecache啥意思)

  • 微信两个手机登录聊天记录同步吗(微信两个手机登录会不会封号)

    微信两个手机登录聊天记录同步吗(微信两个手机登录会不会封号)

  • 苹果11怎么遥控空调(苹果11怎么遥控格力空调)

    苹果11怎么遥控空调(苹果11怎么遥控格力空调)

  • d1s和d3s区别(d1s和d3s区别能够共用吗)

    d1s和d3s区别(d1s和d3s区别能够共用吗)

  • 华为荣耀语音助手怎么打开(华为荣耀语音助手)

    华为荣耀语音助手怎么打开(华为荣耀语音助手)

  • 苹果手机截屏突然失灵(苹果手机截屏突然没声音)

    苹果手机截屏突然失灵(苹果手机截屏突然没声音)

  • 华为m6充电慢怎么回事(华为m6充电慢怎么办)

    华为m6充电慢怎么回事(华为m6充电慢怎么办)

  • 苹果6耳机苹果8能用吗(苹果6用苹果8的耳机有什么影响吗?)

    苹果6耳机苹果8能用吗(苹果6用苹果8的耳机有什么影响吗?)

  • 苹果手机下载大于150怎么设置(苹果手机下载大于200m怎么用流量)

    苹果手机下载大于150怎么设置(苹果手机下载大于200m怎么用流量)

  • 空间小秘密怎么打开(空间小秘密怎么打开2021)

    空间小秘密怎么打开(空间小秘密怎么打开2021)

  • 微信7.0怎么看别人的时刻视频(微信8.0怎么看别人)

    微信7.0怎么看别人的时刻视频(微信8.0怎么看别人)

  • 抖音怎么让别人看不到我的粉丝(抖音怎么让别人看不到ip地址)

    抖音怎么让别人看不到我的粉丝(抖音怎么让别人看不到ip地址)

  • 爱奇艺怎么下载影片(爱奇艺怎么下载视频)

    爱奇艺怎么下载影片(爱奇艺怎么下载视频)

  • 苹果mac修改用户名与密码的方法 苹果电脑如何修改开机密码(苹果mac修改用户名和密码)

    苹果mac修改用户名与密码的方法 苹果电脑如何修改开机密码(苹果mac修改用户名和密码)

  • csrss.exe是什么进程?有没有病毒?(csrss是什么程序)

    csrss.exe是什么进程?有没有病毒?(csrss是什么程序)

  • 金融资产交易增值税
  • 工资延期发放最多不能超过多少天
  • 个税申报怎么办
  • 公司的股东就是公司的发起人
  • 年终奖12月份计提少了
  • 购进餐饮服务的会计分录
  • 降低企业成本的有效途径
  • 费用确认的时点
  • 进行利润分配时必须遵循的原则
  • 质保期内质量问题
  • 培训学校预收学费要交税吗
  • 建筑公司对外如何开票
  • 税控盘上开完发票发的邮件在哪查看
  • 展览费怎么开票
  • 按季度计提利息
  • 专项资金需要交印花税吗
  • 跨年度错账更正方法
  • 财务科目明细表格模板
  • 所得税a类申报表
  • 高新企业奖励补贴交税吗
  • 金蝶核算项目明细表
  • 进项票月初收到能抵上月
  • 公司清理固定资产怎么开票
  • 职工食堂的费用,会计上怎么做账?
  • “linux系统”
  • 期货保证金的计算公式当日盈亏怎么算
  • 会计凭证包括哪几种凭证
  • 销售商品的会计分录已收到钱
  • 独立核算分公司和非独立核算分公司
  • 固定资产折旧计算方法公式大全
  • 补计提去年所得税费用会计分录
  • html用户注册界面
  • 小规模纳税人结转未交增值税
  • vue2和vue3区别面试题
  • 前端工程师在大学学什么专业
  • 租房开的发票收的税怎么做账?
  • 借调人员怎么入账
  • 业务出差餐费如何记账
  • mongodb $and
  • 织梦官网倒闭了吗
  • 小规模纳税人收入超过500万怎么办
  • 营改增后新纳入增值税征税范围的有
  • 质量扣款可以放到费用吗
  • 建造合同收入的会计处理
  • 如何利用sql进行数据传输
  • sql server 2008有什么用
  • 旅游业营改增怎么报税
  • 所得税汇算清缴退税会计分录怎么做
  • 制造费用账户在月末一般没有余额
  • 合同权利义务包含债务吗
  • 转让金融商品应交增值税可以抵扣吗
  • 盈余公积的提取基数
  • 企业法人从公司怎么拿钱
  • 现金短缺无法查明计入什么科目
  • 总公司费用能分摊到分公司吗
  • 企业的利润怎么提出来
  • 营业外支出为负数原因
  • 赠送的产品怎么算成本
  • Windows10安装包下载
  • Linux系统下findmnt命令使用全解
  • svchos1.exe - svchos1是什么教程 有什么作用
  • Win7电脑自动关机是什么原因
  • win7系统开机
  • win7系统电脑开机后直接进入系统修复怎么办
  • 备份mbr引导
  • perl写文件
  • cocos2d安装教程
  • Javascript WebSocket使用实例介绍(简明入门教程)
  • jquery 上传进度
  • shell 批量删除
  • javascript函数调用函数
  • Developing for Android, IV: The Rules: Networking
  • 基于python的研究
  • 安卓 crash
  • 广西增值税发票查询平台
  • 如何网上申领税票发票
  • 持有上海市居住证一年以上是什么意思
  • 云南省国家税务总局
  • 造纸及纸制品业属于什么行业
  • 小规模纳税人的认定标准是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设