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

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

  • 城建税计税依据公式
  • 支付给员工的工资属于什么科目
  • 公司纳税证明怎么开
  • 个人开不动产租赁发票税率
  • 公司租用个人房屋如何记账
  • 自然人扣缴系统初次登录怎么设置密码
  • 合伙企业投入资金是否缴纳印花税
  • 公司购买的货架入哪个科目
  • 增值税免缴
  • 广告业务增值税税率
  • 财务费用中的汇兑损益记在现金流表哪里
  • 营改增服务
  • 本月预缴税额怎么计算
  • 本月做未开票收入,下月开票怎么做账
  • 固定资产预计净残值最后怎么处理
  • 股权继承印花税单方交
  • 外购材料运输费怎么入账
  • 个人独资企业是什么类型
  • 如何正确理解新制度经济学与新古典经济学的关系
  • 内部退养个税计算方式
  • 公司注销前怎么平账才不用交税
  • 上报汇总之后怎么申报
  • 增值税开票金额在哪里看
  • 银行对账单是否属于会计档案
  • 开票系统问题
  • 打官司收案是什么意思
  • 跨年度多计提的印花税怎么冲回
  • 专用发票不报销对公司有影响吗
  • 个体户怎么核定开多少票
  • 发给职工的交通补贴
  • 公司全额承担个税会计分录
  • linux查看系统信息工具
  • 苹果电脑如何提高网速
  • 事业单位财务预算管理制度
  • linux hdparm
  • linux桌面不见了
  • 如何突出显示一行中的最小值
  • 购买理财产品收到的利息分录
  • 顺流交易逆流交易未实现内部交易损益
  • 海康工业相机彩色改黑白设置
  • 股权转让撤回投资
  • 酒店购买天然气流程
  • 自动驾驶感知算法
  • 其他非流动资产是会计科目吗
  • 支付应付账款的文章怎么写的
  • 小规模纳税人能开6%增值税专用发票吗
  • 出差的车费计入什么科目
  • 企业通讯费报销要求
  • 缴税零申报
  • mysql同步复制搭建方法指南详细步骤
  • 去银行打对账单和回执单需要拿什么
  • sql server 内存管理
  • 飞机票抵扣进项税怎么填附表二
  • 固定资产改造的配件怎么入账
  • 企业购入投资性房地产
  • 回购股票并注销是利好吗
  • 冲上月暂估入账的 会计分录
  • 货物发生退运了怎么办
  • 日常修理费用如何记账
  • 工业企业的生产费用包括哪些
  • 扩展什么
  • 在mac上如何使用微信
  • freebsd版本选择
  • windowsxp开机加载页面不动
  • win10一年更新一次
  • win8.1拨号上网
  • win8系统如何关机
  • 物联网版块股票
  • perl hex
  • unity3d脚本参考手册
  • opengl learn
  • jquery生成div
  • jquery如何实现双向绑定
  • unity 求角度
  • Optimizing Unity Games for Mobile Platforms
  • 基于javascript的毕业设计
  • js面向对象编程实例
  • android实战项目
  • 电子税务局企业账号是税号吗
  • 厦门税务机关办事大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设