element-ui动态设置tabel的columns时,切换columns数据表格抖动

问题描述:
在项目中遇到表格的总表字段和子表字段展示的问题,当字段多向字段少进行切换时表头文字的抖动不明显,但是如果是字段少向字段多的表头进行切换时,表头文字会有闪现的掉下来的视觉感,且使用v-show或v-if等无效。

问题分析:
elementUI无论是显示列还是隐藏列,都需要重新计算单元格的高和宽,然后再进行重新渲染。抖动的出现是因为这个过程被直接反馈到了页面上。

解决办法:

可以使用element中的dolayout函数解决。

beforeUpdate () {
  this.$nextTick(() => {
    this.$refs.tablename.doLayout()
  })
},

注:我本地使用this.$refs.tablename是没有doLayout()方法的,打印一下this.$refs.tablename去里面找doLayout(),最终我本地项目的完整路径是this.$refs.tablename.$refs.table.doLayout()

你可能感兴趣的:(elementUI,vue.js,elementui)