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

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

  • 延期交税的情况有哪些
  • 预收三年租金 房产税怎么算
  • 税后利息税怎么算
  • 应付账款及预付账款分录
  • 关联企业的费用包括
  • 国际货运代理可以开免税吗
  • 水利建设专项收入的计税依据是什么?
  • 个人所得税已申报税额合计是什么意思
  • 租赁的房租再出租成本怎么做?
  • 个税的滞纳金怎么算
  • 压覆矿产赔偿标准法律依据
  • 资产负债表年初余额是不是一直不变
  • 企业所得税的减按征收如何计算
  • 商品混凝土增值税政策
  • 月底结账哪些科目有余额
  • 累计折旧费用
  • 公司一般户要做账吗
  • 培训费用走账需要交税吗
  • 哪些票据可以冲抵增值税
  • 委托个人加工应税消费品纳税地点
  • 个人所得税生产经营所得
  • 苹果macbook 系统
  • linux系统用法
  • thinkphp d方法
  • 政府补助的会计处理分录
  • 经营租入的固定资产是什么意思
  • PHP:jdtojewish()的用法_日历函数
  • PHP:JDToGregorian()的用法_日历函数
  • 合并及公司利润表
  • 外贸行业税率
  • 自动驾驶的时候可以睡觉吗
  • chat form
  • 花雕典故
  • named-config
  • 产权转移数据印花
  • 税务机关代开的增值税专用发票不含税销售额是什么意思
  • 出纳报销时应注意什么
  • 车船税酌定减免
  • 增值税季度缴纳时间
  • 高温费收税吗
  • 商品流通企业采购费用
  • 无偿调出固定资产应计入什么
  • 超市出租摊位交什么税
  • 数字证书如何申报社保
  • 债务人对债权人享有
  • 非流动资产减少
  • 公交卡充值发票怎么开
  • 小规模纳税人做账分录全套流程最新
  • 微信收款计入现金流量吗
  • 建账在哪里完成
  • 脚手架租赁费发票内容开劳务可以吗
  • 装订好的凭证可以拿掉一页吗
  • sql like多个
  • sql语句实现查询示例
  • 正确使用气体钢瓶的原则
  • 逼死win8的节奏 Win7升级至Win9仅需30美元 自动升级不需要重新安装
  • 离线方式快速安装在哪里
  • 通过扣缴义务人申报和综合所得年度自行申报
  • ubuntu如何配置
  • Mac安装不了iTunes
  • fedora s7
  • 电脑xp系统的设置在哪
  • linux系统要求配置
  • sunasServ.exe - sunasServ是什么进程 有何作用
  • svcproc.exe - svcproc是什么进程 有什么作用
  • win7 esd安装文件怎么安装教程
  • win7升级win10系统版本软件还有吗
  • win xp 内存
  • win7系统运行在哪
  • win7双击有声音
  • cocos creator开发文档
  • nodejs 视频切片
  • Unsolved bug in fltk-1.1.10/src/filename_list.cxx for scandir --已解决!
  • dos删除指定后缀文件
  • 安卓开发者有多少
  • 从零开始的基础篇
  • angular const
  • 每天一篇文章锻炼口才的文章
  • 国家税务局机打发票可以报销吗
  • 环保税申报操作手册
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设