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()
      })
    }
  },

你可能感兴趣的:(前端,elementui,vue.js,javascript)