最近在使用element-ui table表格的时候又踩坑了,前一秒还在牛逼哄哄的边跟同事扯皮边码代码,下一秒就翻车了。话不多说,直接上正题。
公司的项目架构,表格的的表头与内容都是后台统一返回、前端只要简单处理一下表格的自定义高度就完事,但是就在做表头数据填充的时候翻车了,设置了表格高度刚好占满屏幕,但是表格底部却出现了一块空白。wthat??
通过检查元素会现表格的高度是353px,但是实际整个表格的高度有433px
但是一旦检查元素,调出控制台触发resize了,表格就出来了
最后找了好久的原因,才找到解决方法所在,在使用table时尽量一次性加载完成表头数据,因为我这个是两个模块公用一个表格,但是展示的表头字段还是有出入,在进行模块切换的时候会判断对应模块展示对应表头字段。在这种情况下应当把表头数据全部清空,再重新赋值表头数据
判断表头数据源是否存在再渲染表格。
总结:
表头数据需要一次性再载完成,切勿动态添加