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

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

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

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

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

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

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

1.安装

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.安装

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>