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

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

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

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

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

Vxe-table（基于vue的pc端表格插件）

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

1.安装

  npm insatall xe-utils vxe-table

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");'

Vxe-table API文档地址： https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api
Vxe-table演示： https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll

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

1.安装

  npm install pl-table --save

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
    },
  }

  <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>

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

pl-table GitHub: https://github.com/livelyPeng/pl-table