在这个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使用时候的配置:
<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;
}
