el-table 固定表头失败
时间: 2023-11-07 10:05:51 浏览: 268
vue3 el-table多级表头收缩扩展的实现(JS原味版)
el-table 固定表头失败是因为在使用setheaderColSpan()方法合并表头时受到fixed属性的影响。在这种情况下,合并的表头并不会生效。解决这个问题的方法是使用el-table的header-cell-style属性来实现表头的合并。通过设置setHeader方法中的colSpan和display属性,可以实现表头的合并并且不受fixed属性的影响。
示例代码如下:
```
<el-table :header-cell-style="setHeader">
<el-table-column type="index" align="center" label="序号" width="70px" fixed></el-table-column>
</el-table>
methods(){
setHeader({ row, column, rowIndex, columnIndex }){
if (row[0].level == 1) {
row[1].colSpan = 3;
row[2].colSpan = 0;
row[3].colSpan = 0;
if (columnIndex === 2 || columnIndex === 3) {
return { display: 'none' };
}
}
},
}
```
通过上述方法设置header-cell-style属性,即可实现表头的合并,并且不受fixed属性的影响。
阅读全文