vue数据太多卡死(vue解决数据量过大的问题)

作者：电脑培训网 2024-04-22 06:40:03 996

解决Vue数据过多导致页面卡顿的问题。需求：查询统计表页面操作滞后且缓慢。

原因：查询某个接口一天内每分钟的调用次数。由于一次返回数百列数据，且不进行分页，加载过多数据会导致页面卡顿，操作延迟。

vue数据太多卡死(vue解决数据量过大的问题)

解决办法：

1、与后端通讯分页加载页面

2.使用umy-ui库中的table代替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!--table--divclass='table-container'ux-gridref='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-columnv-for='(item,index)intableConfig':key='index'align='中心':field='item.prop':title='item.label':width='tableData.length？item.width:'auto'':fixed='item.fixed':tree-node='item.prop=='key''模板slot-scope='{row}'span{{row[item.prop]}}/span/模板/ux-table-column/ux-grid/div/template

load方法包含后端请求的数据，需要返回。

methods:{asyncload({row}){letNodes=[]this.$store.commit('settings/CHANGE_LOADING',true)try{constres=waitqueryUsersStatistics({date:this.date,appKey:row.key})const{success,data}=resif(successdata){console.log(data)Nodes=data.map((item)={const{key,Total,分钟计数表}=itemreturn{key,Total,分钟计数表}})}this.$store.commit('settings/CHANGE_LOADING',false)}catch(error){console.log(error)this.$store.commit('settings/CHANGE_LOADING',false)}console.log('节点',节点)返回节点}}

3、UI中不要使用table组件，自定义虚拟表来加载数据

放到下一篇文章里吧。