el-table加载大量数据渲染慢导致页面卡死

记录一下今天app开发遇到的问题，找到一个较简单的方法

问题：使用el-table数据量达到上千条，导致页面卡死浏览器卡死，不能进行其他操作，需求是不分页，分页页面不好看了

解决：el-table组件改为u-table，增加固定高度，没有固定高度的话还是会卡顿

步骤：安装　npm install umy-ui

引入

import { UTable, UTableColumn } from 'umy-ui';
Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);

el-table改为u-table

u-table-column 改为 u-table-column

代码参考

<u-table :data="List"
         style="width: 99%;"
         size="mini"
         height="650"
         use-virtual
         :row-height="30"
         :header-cell-style="{textAlign: 'center',border:'0.5px solid #e4e8ec'}"
         :cell-style="{textAlign: 'center',border:'0.5px solid #e4e8ec'}"
         :border="true">
            <u-table-column prop="xxx" label="xxx" min-width="100"></u-table-column>
            <u-table-column prop="xxx" min-width="90" label="xxxx"></u-table-column>
            <u-table-column prop="xxx" min-width="90" label="xxxx"></u-table-column>
            <u-table-column prop="xxx" min-width="110" label="xxxx"></u-table-column>
            <u-table-column prop="xxx" min-width="80" label="xxxx"></u-table-column>
            <u-table-column prop="xxx" min-width="100" label="xxxx"></u-table-column>
            <u-table-column prop="xxx" min-width="125" label="xxxx"></u-table-column>
            <u-table-column prop="xxx" min-width="120" label="xxxx"></u-table-column>
          </u-table>

注意：el-table的border属性好像在u-table中失效了，经测试可以在cell-style中加上border

效果图：

如果可以采用分页的话，个人认为分页是最好的办法