el-table的expand fixed 数据错位
时间: 2023-12-01 14:40:48 浏览: 32
为解决el-table的expand fixed数据错位问题,可以尝试以下解决办法:
```javascript
watch: {
tableData(val) {
this.doLayoutFun();
}
},
methods:{
//重新渲染组件 解决fixed错位问题
doLayoutFun(){
this.$nextTick(() => {
if(this.$refs.listTable){
this.$refs.listTable.doLayout()
}
})
}
}
```
其中,`tableData`为`el-table`的`data`数据,`listTable`为`el-table`的`ref`。通过`watch`监听`tableData`的变化,当数据发生变化时,调用`doLayoutFun`方法重新渲染组件,解决`fixed`错位问题。在`doLayoutFun`方法中,通过`$nextTick`方法等待下一次`DOM`更新后再执行`doLayout`方法,确保重新布局后的组件能够正确渲染。
相关问题
el-table的expand fixed受父级影响 数据错位
el-table的expand fixed受父级影响数据错位的问题可能是由于列表在请求数据后,渲染异常导致的。解决办法是让table重新布局,可以使用官网文档提供的doLayout方法。具体的解决方法如下:
```javascript
watch: {
//tableData为el-table的data数据 (:data='tableData')
tableData(val) {
this.doLayoutFun();
}
},
methods:{
//重新渲染组件 解决fixed错位问题
doLayoutFun(){
this.$nextTick(() => {
//listTable为el-table的ref (ref='listTable')
if(this.$refs.listTable){
this.$refs.listTable.doLayout()
}
})
}
}
```
el-table expand 展开闪动
el-table的expand展开闪动,通常是由于DOM重绘引起的。因为在展开行时,el-table需要重新计算表格的高度,如果计算时间较长,就会导致页面上出现闪动的情况。
解决这个问题的方法可以有以下几种:
1. 设置el-table的row-key属性:这样可以让el-table在展开行时,只渲染指定的行,而不是全部重新渲染。
2. 设置el-table的max-height属性:这样可以限制el-table的最大高度,从而减少DOM重绘的次数。
3. 使用keep-alive组件:将el-table包裹在keep-alive组件中,可以使el-table在展开行时不会被销毁,从而减少DOM重绘的次数。