IMAGINE'S BLOG IMAGINE'S BLOG
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)

peng

平平无奇的web前端开发一枚
首页
  • 原生JS

    • JavaScript
  • 前端框架扩展

    • Vue
    • React
    • UI组件库
  • HTML
  • CSS
  • 浏览器
  • 分类
  • 标签
  • 归档
  • 技术文档
  • GitHub相关
  • Nodejs
关于
  • 网站
  • 友情链接
GitHub (opens new window)
  • Element-UI问题清单
  • el-form表单封装
  • 解决element表格数据量过大导致页面渲染缓慢、卡顿问题
    • Vxe-table(基于 vue 的 pc 端表格插件)
    • pl-table(一个轻量级表格插件)
  • UI组件库
peng
2022-09-06
目录

解决element表格数据量过大导致页面渲染缓慢、卡顿问题

在 B/S 架构中,经常会遇到大数据渲染问题,毕竟 javascript 是单线程。

在使用 table 时,用户需要在上面做大量操作时,就需要考虑页面的渲染问题了。

导致卡顿原因: 数据量过多导致浏览器一次性渲染过多的 DOM,导致 DOM 树占用内存溢出,使得用户操作阻塞。 具体原因查看文章:DOM 性能瓶颈与 Javascript 性能优化 (opens new window)

这里给提供两种表格插件:

# Vxe-table(基于 vue 的 pc 端表格插件)

  • 优势:
    • 可以自定义选择要引入的模块,有效减少项目体积
    • 表格种类多
    • vue 扩展库

1.安装

  npm insatall xe-utils vxe-table
1

2.在 main.js 中引入 vxe-table

  import Vue from "vue";
  import App from "./App.vue";
  import router from "./router";
  import store from "./store";
  import 'xe-utils';
  import VXETable from 'vxe-table';
  import 'vxe-table/lib/index.css';

  Vue.use(VXETable);
  Vue.config.productionTip = false;

  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount("#app");'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Vxe-table API 文档地址: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api (opens new window) Vxe-table 演示: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll (opens new window)


# pl-table(一个轻量级表格插件)

1.安装

  npm install pl-table --save
1

2.在 main.js 中引入 pl-table

import plTable from "pl-table";
import "pl-table/themes/index.css"; // 引入样式(必须引入),vuecli3.0不需要配置,cli2.0请查看webpack是否配置了url-loader对woff,ttf文件的引用,不配置会报错哦
import "pl-table/themes/plTableStyle.css"; // 默认表格样式很丑 引入这个样式就可以好看啦(如果你不喜欢这个样式,就不要引入,不引入就跟ele表格样式一样)

Vue.use(plTable);

new Vue({
  el: "#app",
  render: (h) => h(App),
});

// 注意:如果你不想在入口文件注入, 而是想在单个某个文件页面引入,你可以这样写哦
import { PlTable, PlTableColumn, PlxTableGrid, PlxTableColumn } from "pl-table";
export default {
  components: {
    PlTable,
    PlTableColumn,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <pl-table
       ref="table"
       stripe
       use-virtual
       v-loading="loading"
       :data="tableData"
       highlight-current-row
       height="500"
       style="width: 100%">
    <pl-table-column
           prop="number"
           width="90"
           label="编号">
       <template slot-scope="scope">
         {{scope.row.number}}
       <template>
    </pl-table-column>
  </pl-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

pl-table 主要通过开启 use-virtual 属性来解决表格卡顿问题

pl-table GitHub:  https://github.com/livelyPeng/pl-table (opens new window)

上次更新: 2022/09/06, 16:01:35
el-form表单封装

← el-form表单封装

最近更新
01
Axios 封装
09-06
02
MySQL数据库常用操作
09-06
03
Chrome Extension(扩展程序)开发
09-06
更多文章>
Theme by Vdoing | Copyright © 2020-2024 peng | IMAGINE
image | imgloc.com
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式