el-table固定表头 需要滑动列表查看数据 但是不想展示滑块
时间: 2023-11-11 18:20:17 浏览: 36
你可以通过设置`max-height`和`overflow-y`属性来实现固定表头并滑动列表查看数据但不展示滑块的效果。具体实现步骤如下:
1. 给`<el-table>`标签设置一个固定的高度,例如`max-height: 400px;`。
2. 设置`<el-table>`标签的`overflow-y`属性为`scroll`,这样就可以实现滚动条的出现。
3. 如果想要隐藏滚动条,可以使用以下样式代码:
```
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
```
这样就可以实现固定表头并滑动列表查看数据但不展示滑块的效果了。
相关问题
el-table 固定表头失败
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属性的影响。
el-table固定表头
el-table固定表头的方法有两种:一种是设置固定高度,另一种是使用CSS样式固定表头。首先,如果你想要固定表头并且表格高度自适应,你可以设置el-table的height属性为一个固定的数值,例如"400px"。这样就可以使表头固定在顶部,而表格内容可以自适应高度。另外,你还可以使用CSS样式来固定表头,通过设置表格的position为fixed,并且设置top和left属性为0,这样也可以实现固定表头的效果。