elementUI表格动态渲染错乱

问题：

表格设置固定高度，表格内容超过高度，表格出现滚动，但是表格滚动部分高度偏小（比表格高度减去表格头小）。表格左侧第一列固定左侧，横向出现滚动，表格横向出现错位。不固定出现，频率有时高、有时低。

环境：

vue: 2.6.6 element-ui: 2.10.1 请求接口动态渲染表格头和表格内容

分析：

一开始会想是项目中样式冲突导致错乱，页面切换加审查一番元素之后会发现并不是。标签带有class名为el-table__body-wrapper，设置行内样式高度偏小，导致表格未能达到设置高度，出现空白错位区。竖列固定后的行错位也是同样问题，都是elementUI的表格计算高度不是在渲染之后导致的。问题关键就是在表格渲染完成之后重新布局表格。elementUI文档中有方法doLayout重新布局表格。

this.$nextTick(()=>{this.$refs.tableRef.doLayout()
})
// table的ref为tableRef，更新渲染表格的数据后执行上面代码

elementUI表格动态渲染错乱相关推荐

element-ui表格列排序错乱问题解决方案
文章目录一.基本代码二.问题三.解决方案一.基本代码在使用el-talble的时候可以加上sortable属性,使表格中的某一列具备排序的功能,点击表格title右侧的三角符号可以切换正序和 ...
封装element中的table表格动态渲染（动态表头，可操控列）
vue+element实现动态表格:根据后台返回的属性名和字段动态生成表头可变表格由于项目需求,需要有一个动态表格,可以根据配置或从后台获取表格属性列.并加上了某一行需要点击跳转和操作列里面的功能 ...
elementui 计数器动态渲染无法点击
<el-table :data="orders" style="width: 100%;min-height:auto !important;">& ...
vue 竖向纵向仿表格动态渲染表头表格根据id填充单元格
关于布局这里不多说,上篇为此发过一篇,因需求布局稍微改动一下.移步至布局篇.如产品所说,一些数据是已封装好的,最后不要轻易动,既然这样.原本简单的需求必须由多接口返回数据,前端进行拼接并填充.后端提供 ...
【ElementUI】el-table 多表格切换导致 expands 展开行仍然会保留的问题（多表格切换时的表格渲染错乱）
首先先叙述一下需求和遇到的问题: 需求: 在这个页面里,我需要去判断查询条件,从而在不同的条件下,展示不同的表格数据,即在不同情况下,展示不同的表格或者说表格的数据列,从而在不同的条件下看到不同的表格 ...
elementUI表格树动态合并列问题处理（最终版，---新需求）
在之前的一篇博客中针对这个问题,写了解决方法.现在是加了新需求,发现之前的算法有一些不足之处,现在进行纠正. 目前表格的需求是: 评估人/评估分数/加减分说明,这个组合,根据评估人相同,就列合并:指标 ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
elementui表格根据指定相同属性值合并单元格 josn数据,id相同的单元格合并,前3column和后7column合并 let arr = [ {"op":"Su ...

elementUI表格动态渲染错乱

问题：

环境：

分析：

elementUI表格动态渲染错乱相关推荐

最新文章

热门文章