位置: 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文件怎么打开)

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

  • 华为运动手表怎么调时间和日期(华为运动手表怎么连接苹果手机)

    华为运动手表怎么调时间和日期(华为运动手表怎么连接苹果手机)

  • 只知道淘宝会员名怎么加好友(只知道淘宝会员号怎么办)

    只知道淘宝会员名怎么加好友(只知道淘宝会员号怎么办)

  • 小米10至尊纪念版有几种颜色(小米10至尊纪念版上市时间)

    小米10至尊纪念版有几种颜色(小米10至尊纪念版上市时间)

  • 电脑可以用老版本微信吗(老电脑可以升级吗)

    电脑可以用老版本微信吗(老电脑可以升级吗)

  • iphonexsmax发热就卡(iphonexsmax突然发烫)

    iphonexsmax发热就卡(iphonexsmax突然发烫)

  • 微信不可见会被看到吗(微信不可见会被发现吗)

    微信不可见会被看到吗(微信不可见会被发现吗)

  • 怎么查看微信发来照片的拍摄时间(怎么查看微信发了多少消息)

    怎么查看微信发来照片的拍摄时间(怎么查看微信发了多少消息)

  • 抖音提示有正在编辑的视频(抖音提示正在直播)

    抖音提示有正在编辑的视频(抖音提示正在直播)

  • 开机输密码界面黑屏(开机输密码界面怎么调出屏幕键盘)

    开机输密码界面黑屏(开机输密码界面怎么调出屏幕键盘)

  • 拼多多怎样查看物流的运送情况(拼多多怎样查看好友购买记录)

    拼多多怎样查看物流的运送情况(拼多多怎样查看好友购买记录)

  • 电脑开机windows未能启动是怎么回事(电脑开机windows无法启动)

    电脑开机windows未能启动是怎么回事(电脑开机windows无法启动)

  • vivox7能不能设置应用分身(vivoy70s怎么设置)

    vivox7能不能设置应用分身(vivoy70s怎么设置)

  • 什么是手机安全模式(什么是手机安全模式怎样退)

    什么是手机安全模式(什么是手机安全模式怎样退)

  • 华为怎么解除应用截屏限制(华为怎么解除应用截屏限制 智能截屏也不行)

    华为怎么解除应用截屏限制(华为怎么解除应用截屏限制 智能截屏也不行)

  • 华为转换器怎么使用(华为转换器怎么下载到u盘)

    华为转换器怎么使用(华为转换器怎么下载到u盘)

  • 手机mhl功能是什么(手机mhl功能在哪里)

    手机mhl功能是什么(手机mhl功能在哪里)

  • 麦克风增强动不了(麦克风增强拉不动怎么办)

    麦克风增强动不了(麦克风增强拉不动怎么办)

  • 苹果感光怎么关掉(苹果手机怎么取消感光)

    苹果感光怎么关掉(苹果手机怎么取消感光)

  • qq被误封7天了怎么办(qq被误封7天了怎么恢复)

    qq被误封7天了怎么办(qq被误封7天了怎么恢复)

  • 京东预约后怎么抢购(京东预约后怎么购买)

    京东预约后怎么抢购(京东预约后怎么购买)

  • airpods使用方法怎么接电话(ipod airpods使用方法)

    airpods使用方法怎么接电话(ipod airpods使用方法)

  • 华为手机上月牙图标是什么(华为手机月牙图标什么意思)

    华为手机上月牙图标是什么(华为手机月牙图标什么意思)

  • 二手房交易app有哪些功能(二手房交易app有哪些)

    二手房交易app有哪些功能(二手房交易app有哪些)

  • 微信小程序【获取用户昵称头像和昵称(附源码)】(微信小程序获取位置信息的权限在哪里修改位置)

    微信小程序【获取用户昵称头像和昵称(附源码)】(微信小程序获取位置信息的权限在哪里修改位置)

  • 电子税务局能查到个税申报信息吗
  • 流转税具体的账务处理,可以怎样考虑?
  • 中国注册税务师报考条件
  • 如何计提当月的个人所得税?
  • 核定征收企业股权转让的个人所得税
  • 财务负责人和法人可以是夫妻吗
  • 个人股权激励收入申报
  • 小规模开票软件怎么下载
  • 毛利和销售毛利
  • 融资租赁设备增值税怎样抵扣
  • 外购商品用于赠送分录
  • 合同印花税用不用计提
  • 公司收个人不开票的货款是否可以收取现金?
  • 上年的应收帐款在本年度如何录入?
  • 报销跨月还能报销吗
  • 金税盘要钱不
  • 问答技巧例子
  • a公司拟吸收合并b公司除一项无形资产吗
  • 免税的和不免税的可以开在一张发票上吗
  • 非营利性组织有
  • 预缴企业所得税是含税还是不含税
  • 1697508560
  • 税前扣除是好事吗
  • 招标服务费计算公式
  • 政府专项基金是什么
  • plugin.exe是什么进程
  • win10显示在哪
  • 货物无偿赠送分录
  • csrsv.exe是什么
  • 应付债券利息费用
  • 科罗拉多州位置
  • 委托代销商品的会计分录怎么做
  • 营业外支出准则
  • 长期应付款列报为什么是后一年的
  • idea配置meaven
  • mysql binlog是什么
  • 关联公司开发票
  • 企业研发费用会计处理英文文献
  • java线程的四种基本状态
  • 咨询公司小规模纳税人企业所得税核定征收
  • 现流表与资产负债表的关系
  • 劳务支出和应付职工薪酬
  • 购买办公用品如何写摘要
  • 保险车辆理赔入账流程
  • 支付宝提现到对公账户要收手续费吗
  • 政府补助的房子叫什么
  • 以前年度多计提了费用
  • 服务行业收入会增加吗
  • 外贸出口退税政策
  • 发票入账的时候能作废吗
  • 资产负债表税务局能看到吗
  • 机关事业单位以高于市场价租赁房屋
  • 退回备用金在现金怎么办
  • mysql输入中文显示乱码
  • 其他操作系统类型
  • centos搭建svn服务器
  • 富士通FUJITSU笔记本电脑开机进入BIOS的方法(F2)
  • xp硬盘安装win7系统教程
  • win10无法进入休眠状态的原因
  • linux 系统文件
  • window10应用商店
  • cocos2dx入门
  • opengl画实体
  • react service worker
  • unity3D游戏开发
  • 安卓handler使用
  • node.js详解
  • 黑马程序员学费多少钱2022
  • python3.9怎么用
  • js调用键盘
  • python中zip函数的用法
  • java 视频教程
  • 在windows中快捷键的作用
  • jQuery ajax中使用confirm,确认是否删除的简单实例
  • 辽宁省电子税务局电话
  • 对计划单列市税务局不服向谁复议
  • 资本结构不合理的公司有哪些
  • 电子增值税专用发票和纸质增值税专用发票的区别
  • 广东省国家税务局电子发票系统,网络设置
  • 郑州市地方税务局新郑国际机场分局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设