1.现象有时el-table中可能有成千上万条数据，它们必须显示在一个页面上。此时页面上渲染的dom太多，可能会导致页面卡顿。
解决方案：表格高度固定，只渲染用户在表格中滚动的视图dom2。由于数据量过大，浏览器渲染了过多的标签元素，导致DOM树占用了过多的内存，从而阻塞了用户的操作。
具体原理可以参考其他大佬写的文章：DOM性能瓶颈和Javascript性能优化。
3.解决方案和原则。
解决方案请参考：页面中长列表滚动的优化。
解决办法
使用第三方插件https://www.npmjs.com/package/pl-table
模板！-使用useVirtual属性打开虚拟滚动。使用虚拟滚动时，表格高度和行高必须固定-div style=' height 3360 100%；宽度： 100%；' padding : 0 30px ' div style=' color : red；'Pl-table在线预览，更多玩法请看文档。welcome star/div El-button @ click=' $ router . push({ path : '/text ' })'到子页(测试缓存组件)/El-button div El-button @ click=' all selection ' select all/El-button El-button @ click=' clear selection '清除选中的/El-button El-button @ click=' set data(3)'带有3条变更数据/El-button El-button @ click=' set data(200)'带有200条变更数据/El- El-button El-button @ click=' PagingscrolltopLeft(2000)'滚动到2000个位置/El-button El-button @ click=' PagingscrolltopLeft(0)'滚动到顶部/El-button El-button @ click=' scroll bottom '滚动到底部位置/El-button El-button @ click=' Set hei(400)'将高度设置为400/El-button El-button @ click=' Set hei(300)'将高度设置为300 -I y轴virtual-div v-if=' true ' p style=' color 3360 red ' I y轴virtual/p pl-table ref=' pl table ' : height=' height ' : data=' data . tabledata ' selectTr class=' selectTr ' header-drag-style 3360 datachanges scroll top=' false ' 3 3360 summary-method=' summary method ' @ table-body-scroll=' table body scroll ' fixed
没有查询到符合条件的记录 </template> <pl-table-column type="selection" width="55" :selectable="selectable" /> <pl-table-column type="index" width="100" fixed /> <!--show-overflow-tooltip属性代表超出则内容部分给出提示框--> <pl-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-overflow-tooltip="item.showOverflowTooltip" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" /> </pl-table> </div> <!--我是X + Y轴同时虚拟--> <div v-if="true"> <p style="color: red">我是X + Y轴同时虚拟</p> <plx-table-grid :data="data.tableData" height="300" :show-summary="true" :summary-method="summaryMethod" ref="plTable2" > <plx-table-column type="selection" width="55" fixed="left" /> <plx-table-column type="index" width="100" fixed="left" /> <plx-table-column v-for="item in columns2" :key="item.id" :resizable="item.resizable" :prop="item.prop" :label="item.label" :fixed="item.fixed" /> </plx-table-grid> </div> <!--我是加入分页的表格--> <div v-if="false"> <p style="color: red">我是加入分页的表格</p> <pl-table :data="data.tableData" big-data-checkbox :max-height="height" header-drag-style fixedColumnsRoll use-virtual :row-height="rowHeight" :pagination-show="true" :total="pageForm.total" :page-size="pageForm.pageSize" :current-page="pageForm.currentPage" @handlePageSize="handlePageSize" > <template slot="empty"> 没有查询到符合条件的记录 </template> <pl-table-column type="selection" width="55" /> <pl-table-column type="index" width="100" fixed /> <!--show-overflow-tooltip属性代表超出则内容部分给出提示框--> <pl-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-overflow-tooltip="item.showOverflowTooltip" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" /> </pl-table> </div> <!--我是普通的el-table树形表格，这个数据多了就卡，这就是原本的el-table树表格，必须指定 row-key--> <div v-if="false"> <p style="color: red;"> 我是普通的el-table树形表格，这个数据多了就卡，这就是原本的el-table树表格，必须指定 row-key </p> <pl-table ref="plTable" :height="height" :data="treeData" selectTrClass="selectTr" row-key="id" header-drag-style @table-body-scroll="tableBodyScroll" fixedColumnsRoll inverse-current-row @select-all="selectAll" > <template slot="empty"> 没有查询到符合条件的记录 </template> <!--show-overflow-tooltip属性代表超出则内容部分给出提示框--> <pl-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-overflow-tooltip="item.showOverflowTooltip" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" /> </pl-table> </div> <!--我是pl-table大数据树形表格 必须指定 row-key 必须开启use-virtual--> <div v-if="true"> <p style="color: red;"> 我是pl-table大数据树形表格 必须指定 row-key 必须开启use-virtual </p> <el-button @click="$refs.plTreeTable.toggleTreeExpansion(treeData<0>)" >切换第一个</el-button > <el-button @click="$refs.plTreeTable.setTreeExpansion(treeData<2>, true)" >展开第三个</el-button > <el-button @click="$refs.plTreeTable.setAllTreeExpansion()" >展开全部</el-button > <el-button @click="$refs.plTreeTable.clearTreeExpand()" >关闭所有</el-button > <el-button @click="getTreeExpansionEvent">获取已展开</el-button> <pl-table ref="plTreeTable" :max-height="height" :data="treeData" selectTrClass="selectTr" row-key="id" bigDataCheckbox :treeConfig="{ children: 'children', expandAll: false }" :use-virtual="true" header-drag-style @table-body-scroll="tableBodyScroll" fixedColumnsRoll inverse-current-row @select-all="selectAll" > <template slot="empty"> 没有查询到符合条件的记录 </template> <!--pl-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性--> <pl-table-column :treeNode="item.treeNode" v-for="item in columns" :key="item.id" :resizable="item.resizable" :show-overflow-tooltip="item.showOverflowTooltip" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" /> </pl-table> </div> </div></template> <script>// 下面是关于pl-table的树形数据的介绍，希望读完下面的文字 // （最大数量500）当然你可以更多，那么只会导致你遍历时间多，页面等待时间长，（并非渲染节点时间长）// 另外 就以下的这个层级，总数据量展开后，就是 500 + 500 x 3 + 3 x 1 = 2003 的总数据量// 如果你 第一级是500， 第二级也是500， 第三级是10。 那么你的数据量就是 500 + 500 x 500 + 500 x 10 的总数据量，这是非常吓人的// 所以结合自己情况去给树数据，不要瞎乱给下面的数据，树节点避免不鸟去递归，如果你的数据量很大很大，那么你会死在遍历上。// 注意,注意，注意：并非第一级不能超过500，是想告诉你们嵌套里面子节点层级数据量不要太大。比如你可这样的： 第一级为1000， 第二级为2-5的数据量，// 第三级为2-5的数据量....， 那么这样算下来，就是 1000 + 1000 x 5 + 5 x 5 = 6025的数据量，应该是可以的，但是记住要是太大的嵌套数据。那只会导致// 程序卡在遍历数据上，因为程序需要慢慢去递归遍历。这是没有办法的。 // 但是传统el-table 或者el-tree他们数据量超过200 就会卡。 所以我们已经很好的优化了这一点。不过看来对于树形数据的要求，应该数据量不会太大。// 你可以在pl-table的基础上去改改样式，就可以变相的去实现el-tree的组件了哦，你隐藏下头部，把行的高度给小一点。然后隐形边框线。是不是就是el-tree了呢？？？ var dataList = Array.from({ length: 500 }, (_, idx) => ({ id: idx + "_" + 1, date: "2016-05-03", name: 1, ab: "欢迎使用pl-table", address: idx, children: Array.from({ length: 3 }, (_, idx2) => ({ id: idx + "_" + idx2 + "_" + 1, date: "2016-05-03", name: 1, ab: "欢迎使用pl-table", address: idx + "_" + idx2, children: Array.from({ length: 1 }, (_, idx3) => ({ id: idx + "_" + idx2 + "_" + idx3 + "_" + 1, date: "2016-05-03", name: 1, ab: "欢迎使用pl-table", address: idx + "_" + idx2 + "_" + idx3 })) }))}));export default { name: "home", data() { return { rowHeight: 50, columns: < { prop: "address", label: "日期", width: 120, treeNode: true, showOverflowTooltip: true }, { prop: "address", label: "地址", width: 100, showOverflowTooltip: true }, { prop: "address", label: "噜噜噜", width: 230, showOverflowTooltip: true }, { prop: "address", label: "娃哈哈", width: 100, showOverflowTooltip: true }, { prop: "address", label: "地址", width: 100, showOverflowTooltip: true }, { prop: "address", label: "娃哈哈", width: 100, showOverflowTooltip: true }, { prop: "address", label: "娃哈哈", width: 100, showOverflowTooltip: true }, { prop: "address", label: "地址", width: 100, showOverflowTooltip: true }, { prop: "address", label: "娃哈哈", width: 100, showOverflowTooltip: true }, { prop: "address", label: "娃哈哈", width: 100, showOverflowTooltip: true }, { prop: "address", label: "噜噜噜", showOverflowTooltip: true }, { prop: "address", label: "娃哈哈", width: 100, showOverflowTooltip: true, fixed: "right" } >, columns2: Array.from({ length: 20 }, (_, idx) => ({ prop: "address", label: "地址" + idx, width: 200, showOverflow: true, sortable: true, fixed: "" })), data: { tableData: Array.from({ length: 10000 }, (_, idx) => ({ id: idx + 1, date: "2016-05-03", name: 1, ab: "欢迎使用pl-table", address: 1 + idx })) }, top: 0, height: 500, pageForm: { total: 1000, pageSize: 10, currentPage: 1 }, treeData: dataList }; }, methods: { selectAll(val) { console.log(val); }, selectable(row, index) { if (index === 1) { return false; } else { console.log(row,index); return true; } }, // 合计 summaryMethod({ columns, data }) { // 平均值算法（不需要自己去掉） function cacl(arr, callback) { let ret; for (let i = 0; i < arr.length; i++) { ret = callback(arr, ret); } return ret; } // 平均值算法（不需要自己去掉） Array.prototype.sum = function() { return cacl(this, function(item, sum) { if (typeof sum == "undefined") { return item; } else { return (sum += item); } }); }; // 平均值算法（不需要自己去掉） Array.prototype.avg = function() { if (this.length == 0) { return 0; } return this.sum(this) / this.length; }; const means = <>; // 合计 const fenceSums = <>; // 平均值 columns.forEach((column, columnIndex) => { if (columnIndex === 0) { means.push("合计"); fenceSums.push("平均值"); } else { const values = data.map(item => Number(item
