vue 表格几万数据渲染过慢

2023-04-06 08:39| 来源: 网络整理| 查看: 265

背景

基于element 表格，没有分页处理，发现一旦数据几千几万页面渲染和滑动很卡顿

解决方案思路

1、加分页，但要接口配合

2、懒加载的思路，有直接的插件,如npm install [email protected] 如下，也可以自己些懒加载实现

//main.js import elTableInfiniteScroll from 'el-table-infinite-scroll' Vue.use(elTableInfiniteScroll) //vue export default { data () { return { dataTall: [],//总共数据 tableData: [],//表格展示数据 n: 20, loading: false } }, computed: { }, created () { this.init() }, methods: { init () { this.saveDATA = [] for (let i = 0; i < 1000; i++) { this.dataTall.push({ date: i, name: '王小虎' + i }) } }, loadTable () { this.loading = true if (this.tableData.length < this.dataTall.length) { const data = this.tableData.concat( this.dataTall.slice(this.tableData.length, this.tableData.length + n) ) this.$set(this, 'tableData', data) } this.loading = false } } } 复制代码

3、有大数据的表格插件可以直接用，如pl-table,umy-ui插件

//安装pl-table npm i pl-table //main.js import plTable from 'pl-table' import 'pl-table/themes/index.css' // 引入样式（必须引入)，vuecli3.0不需要配置，cli2.0请查看webpack是否配置了url-loader对woff，ttf文件的引用,不配置会报错哦 //pl-table 是基于element开发的，继承element的样式和方法在这里就没有引用pl-table的样式，默认样式就是element的样式 Vue.use(plTable) //vue 只贴了关键代码 export default data() { return { tableData:[] } } 复制代码 //安装umy-ui npm install umy-ui //main.js import 'umy-ui/lib/theme-chalk/index.css';// 引入样式 import { UTable, UTableColumn } from 'umy-ui'; Vue.use(UTable); Vue.use(UTableColumn); //vue export default data() { return { tableData:[] } } 复制代码

关于自己懒加载的案列如下

element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题_前端_D浩DzD-DevPress官方社区 (csdn.net)

【本文地址】

vue 表格几万数据渲染过慢

vue 表格几万数据渲染过慢

今日新闻

推荐新闻