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

Posted 2023-03-15

参考技术A 在这个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;