el-table 固定前n行 配合 max-height 生效

:row-class-name="TableRowClassName" 加上类名

javascript 复制代码
   <el-table
        :data="computedTableList"
        border
        style="width: 100%"
        :row-class-name="TableRowClassName"
        max-height="800">
        <el-table-column fixed prop="name" align="center" width="185" :key="1">
 </el-table>

  function TableRowClassName ({ row, rowIndex }) {
    if (row.isFalseData) {
      return 'top_bgc fixed-row'
    }
    if (row.isSticky) {
      return 'sticky_bgc'
    }
  }


  // 顶部固定 悬浮
  :deep(.el-table tr.el-table__row.fixed-row) {
    position: sticky; //粘性定位
    position: -webkit-sticky;
    z-index: 999;
  }
  :deep(.el-table tr.el-table__row.fixed-row:nth-of-type(1)) {
    top: 0;  
  }
  :deep(.el-table tr.el-table__row.fixed-row:nth-of-type(2)) {
    top: 94px;  // 根据每一行的高度自行调整
  }
  :deep(.el-table tr.el-table__row.fixed-row:nth-of-type(3)) {
    top: 188px;
  }
相关推荐
长风清留扬8 分钟前
小程序开发实战项目:构建简易待办事项列表
javascript·css·微信小程序·小程序·apache
程序员_三木8 分钟前
从 0 到 1 实现鼠标联动粒子动画
javascript·计算机外设·webgl·three.js
点点滴滴的记录14 分钟前
Java的CompletableFuture实现原理
java·开发语言·javascript
web Rookie27 分钟前
React 中 createContext 和 useContext 的深度应用与优化实战
前端·javascript·react.js
男孩1231 分钟前
react高阶组件及hooks
前端·javascript·react.js
跨境商城搭建开发2 小时前
一个服务器可以搭建几个网站?搭建一个网站的流程介绍
运维·服务器·前端·vue.js·mysql·npm·php
hhzz2 小时前
vue前端项目中实现电子签名功能(附完整源码)
前端·javascript·vue.js
秋雨凉人心2 小时前
上传npm包加强
开发语言·前端·javascript·webpack·npm·node.js
JoeChen.2 小时前
PostCSS插件——postcss-pxtorem结合动态调整rem实现字体自适应
javascript·ecmascript·postcss
前端切圖仔3 小时前
失业,仲裁,都赶上了(二)
前端·javascript·程序员