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

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

  • 小规模纳税人工程发票几个点
  • 金税四期监控个人在银行的存款吗
  • 残保金每次缴纳都是一样的吗
  • 股东个人为公司付的钱
  • 利润表本期金额怎么算
  • 冲减成本费用会计分录
  • 实施计划成本存货发生毁损的会计处理怎么做?
  • 进项发票当月不抵扣怎么入账
  • 过路费占运费比例
  • 房地产开发企业预缴增值税
  • 空调减值损失属于什么科目?
  • 小规模建筑企业预缴税款
  • 销售礼盒增值税税率
  • 办公室租赁合同需要交哪些税额?
  • 发票专用章只能盖一个
  • 反写状态已反写是什么意思
  • 外币报表未分配利润折算
  • 航道疏浚服务属于什么服务
  • 生产成本和主营业务成本哪个大
  • 电器供应
  • 房地产所得税税负率计算公式
  • 买免税产品
  • 合同增值税如何申报
  • 长期债权投资业务处理
  • 客户收集软件
  • 定向增发利好还是利空股票
  • 操作系统的内存映射
  • 建筑业会计需要做到哪些
  • 高温补贴 个人所得税
  • 代销商品受托方怎么做账
  • 合并及公司利润表
  • 商业模式诠释了一个企业如何赚钱
  • idea配置meaven
  • vue3.0实战项目
  • 微信小程序游戏手游排行榜
  • 外经证过期没核销罚多少钱
  • 非税收入定额票据可以报销吗去什么地方报销
  • 营业税改增值税的背景
  • 织梦cms可以商用吗
  • 如何用织梦在本地搭建网站
  • phpcms怎么用
  • php环境配置教程
  • 红字信息表重复开具怎么处理
  • 金税盘维护费抵扣
  • 哪些收据可入账科目
  • 租金收入怎么做分录
  • 权责发生制根据产品的生产特点和管理要求结转成本
  • 在资产减值准备中符合条件可以转回的有
  • 坏账准备的借贷方向代表什么
  • 年底计提坏账收回一部分怎么处理
  • 物业建车棚谁出钱
  • 内账应收应付怎么对账
  • 装修公司让客户承担税费是否合理
  • 固定资产的改良支出有哪些
  • 三栏式明细账需要结账吗
  • 实缴资本在公司能查到吗
  • 发票的抵扣期限是多少天
  • 进口货物例题
  • 采购未取得发票怎么结转成本
  • 土地闲置费属于政府性基金收入
  • windows不能打开此文件result:31
  • mac快捷键一览
  • nhaspx.exe是什么
  • 免打扰模式在哪关
  • win10怎么升级到2020
  • linux桌面设置界面在哪
  • 将Bitmap用Base64转码成字符串,再解码回来出现黑色背景的问题原因及解决办法。
  • vue路由router
  • jquery基本语法
  • 猫猫的游戏
  • node项目部署
  • jquery鼠标位置
  • jqueryshow和hide封装
  • 广东税务怎么查社保缴费明细
  • 房地产企业预缴税款最新规定
  • 无偿划转暂行规定
  • 税务局纳税服务中心
  • 志愿者补贴如何领取
  • 预征率是2%怎么计算
  • 税务迁出需要哪些手续2020年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设