vue 大数据 渲染_electron中vue，table渲染大量数据卡顿

在这个electron项目里，使用element-ui中的el-table渲染了很多数据(大于100条，每条中输入框不小于10个)，造成了 输入时十分卡顿，内存占用达到了100M，需求方又不想分页，只能寻求折中的方案。

该方案内置了el-table，也就是说你可以不用使用element-ui也是可以用的。

首先安装pl-table

npm i pl-table

main.js中

import plTable from 'pl-table'

import 'pl-table/themes/index.css'

Vue.use(plTable)

这里写一下我的pl-table使用时候的配置:

ref="plTable"

:datas="showTableData"

:row-height="65"

:pt-total="filterTableData.length"

:page-size="pageSize"

:excess-rows="1"

:height-change="false"

:current-page="currentPage"

:page-sizes="[100, 200, 300, 400, 500]"

no-data-height="calc(100vh - 154px)"

auto-resize

use-virtual

@handlePageSize="handlePageSize"

>

默认可以使用分页,更多api请自行百度。

如果表格无法显示:

.electron-vue中webpack.web.config.js 我这里是52-58行替换

{

test: /\.js$/,

use: 'babel-loader',

include: [ path.resolve(__dirname, '../src/renderer') ],

exclude: file => /node_modules/.test(file) && !/\.vue\.js/.test(file) && !/pl-table/.test(file)

}

然后重启electron 就可以显示了。

然后分页和表格的间距默认是20px。我们这里改一下，不要这么大的间距

.plTableBox .myPagination{

padding-top: 0;

}