解决方式:
1.固定表头:
在el-table元素中定义height
属性,即可实现固定表头的表格,不需要额外的代码
2.固定表格内搜索框(第二行):
在el-table元素中定义:row-class-name="tableRowClassName"属性,代码逻辑如下:
tableRowClassName({ row, column, rowIndex, columnIndex }) {
if (rowIndex == 0) {
return "fixed-row";
}
},
css更改,代码如下:
<style lang="less">
// 固定第二行
.el-table .fixed-row {
display: table-row;
position: sticky; // 不要用fixed,因为他是基于屏幕定位,也会出现滚动的问题
position: "-webkit-sticky";
top: 0;
width: 100%;
z-index: 1; // 列的固定是4(因为有固定列,为了不互相影响所以要注意列的层级, 不然滚动的时候会有bug,发现固定的列不固定了)
}
</style>