el-table fixed row

需求首行和第二行固定,第一列固定,这里说的tbody里的行固定,(下面写法是用jsx写的)
方法    
tableRowClassName({row, column, rowIndex, columnIndex}){
       判断固定行的条件
      if(row.col_1 == 'xxx') {
          return 'fixed-row'
      }
  },
 
利用table组件里row-class-name属性给要固定的行样式
 <el-table row-class-name={tableRowClassName}></el-table>
 
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属性隐藏起来了)
   }

Guess you like

Origin blog.csdn.net/weixin_46413834/article/details/128641258