您现在的位置是：首页 >技术教程 >elementui里的table表格组件大数据渲染严重的性能卡顿问题网站首页技术教程

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

在这里推荐的一个可以平替elementUI的table组件的库那就是 umy-ui

关于umy

umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。解决大数据表格渲染的核心方法是虚拟表格

用法

安装：

npm install umy-ui

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

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

Vue.use(UmyUi);

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的高度即可！)

出现表格渲染错位的解决办法

watch: {
    "tableData" (val) {
      this.$nextTick(() => {//修复表格错位
        this.$refs.tableRef && this.$refs.tableRef.doLayout()
      })
    }
  },