需求首行和第二行固定,第一列固定,这里说的tbody里的行固定,(下面写法是用jsx写的)
方法
rowClass({row, column, rowIndex, columnIndex}){
判断固定行的条件
if(row.col_1 == 'xxx') {
return 'fixed-row'
}
},
利用table组件里row-class-name属性给要固定的行样式
<ElTable row-class-name={this.rowClass}></ElTable>
css部分
.el-table .fixed-row{
display: table-row;
position: sticky;(不要用fixed,因为他是基于屏幕定位,也会出现滚动的问题)
position: "-webkit-sticky";
background: #181922 !important; (设置自己要的背景色)
top: 0;
width: 100%;
z-index: 3; // 列的固定是4(因为有固定列,为了不互相影响所以要注意列的层级, 不然滚动的时候会有bug,发现固定的列不固定了)
td {
// border: 1px solid #181922;
background: #181922 !important;
}
}
.el-pagination--small .arrow.disabled, .el-table .hidden-columns, .el-table td.is-hidden>*, .el-table th.is-hidden>*, .el-table--hidden {
visibility: visible;(这里是因为我写的时候我行头文字消失了,排查发现el-table给他加了visibility属性隐藏起来了)
}
el-table固定行
于 2022-09-22 13:54:22 首次发布