解决element ui大数据渲染表格时严重卡顿的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决element ui大数据渲染表格时严重卡顿的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element ui中的table表格组件在大量数据渲染的时候渲染会出现严重的卡顿问题，虽然网上也有很多解决方案，比如什么延迟加载，虚拟加载等等，这里为了避免走弯路，直接上终极解决方案大招：趁早换组件、马上换组件、现在就去换组件！！！

推荐组件：umy-ui

官方文档：umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题里面有各种表格格式，可满足列过多、行过多等多种大数据情况优化的表格方案

用法

1、安装

npm install umy-ui

2、main.js(本文按照全部引入的方式引入的):

import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';

Vue.use(UmyUi);

3、vue文件

<u-table
        :header-cell-style="headerStyle" 
        :height="tableHeight"
        :row-height="rowHeight"
        @selection-change="selectionChange"
        use-virtual 
        ref="tableRef"
        :data="tableData">
        <u-table-column label=" " type="index" fixed="left"></u-table-column>
        <u-table-column
            type="selection"
            fixed="left"
            width="55">
        </u-table-column>
        <u-table-column
            prop="id"
            label="id"
            width="100"
        ></u-table-column>
        <u-table-column
            :label="操作"
            width="140"
            fixed="right"
        >
            <template slot-scope="scope">
              <span class="spanBtn" @click="view(scope.row)">查看</span>
            </template>
        </u-table-column>
</u-table>

data() {
    return {
      rowHeight: 60,
      tableHeight: window.innerHeight - 420,
      headerStyle: { // 表头样式
        backgroundColor: "#d9d9d9",
        fontSize: "14px",
        fontWeight: 900,
        color: "#333"
      },
      tableData: []
    }
}

注意点：

height：是表格的整体高度，不给height或者不给maxheight，又或者给的是0，use-virtual直接会关闭
use-virtual：是整个表格的核心，添加该属性意味着启动虚拟表格可以解决数据渲染卡顿问题。
row-height：use-virtual未开启的情况可以不需要，行高(必须要设置行高，如css给td给了80高度，那么你就给row-height给80，不要乱给高度，以td tr高度为准，否则会导致表格计算不正确，row-height不是去为了设置表格行高，它只是为了表格里面计算某些东西。如果你需要改变你的行高，你需要去写css改变td的高度即可！)文章来源地址https://www.toymoban.com/news/detail-840725.html

出现表格渲染错位的解决办法
watch: {
    "tableData" (val) {
      this.$nextTick(() => {//修复表格错位
        this.$refs.tableRef && this.$refs.tableRef.doLayout()
      })
    }
  },

到了这里，关于解决element ui大数据渲染表格时严重卡顿的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！