el-table的expand fixed 数据错位
时间: 2023-12-01 17:40:48 浏览: 61
为解决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-row-keys 失效
根据提供的引用内容,el-table expand-row-keys 失效可能是由于以下原因导致的:
1. expand-row-keys属性的值不正确或为空。
2. 数据源中的keyField字段与expand-row-keys属性的值不匹配。
3. 在设置expand-row-keys属性之前,数据源还没有加载完成。
4. 在设置expand-row-keys属性之前,el-table组件还没有渲染完成。
为了解决这个问题,可以尝试以下方法:
1. 确保expand-row-keys属性的值正确,并且不为空。
2. 确保数据源中的keyField字段与expand-row-keys属性的值匹配。
3. 确保在设置expand-row-keys属性之前,数据源已经加载完成。
4. 确保在设置expand-row-keys属性之前,el-table组件已经渲染完成。
以下是一个设置expand-row-keys属性的例子:
```html
<el-table :data="tableData" :expand-row-keys="expandRowKeys">
<el-table-column type="expand" width="0">
<template slot-scope="props">
<div>这里是扩展内容</div>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
expandRowKeys: [0, 1] // 设置需要展开的行的key值
}
}
}
```
阅读全文