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;
  }
相关推荐
胡志辉的博客2 分钟前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
|晴 天|5 分钟前
文章系列管理系统:拖拽排序与进度追踪
前端·vue.js·typescript
jiayong2327 分钟前
第 17 课:任务选择与批量操作
开发语言·前端·javascript·vue.js·学习
源码老李34 分钟前
Day 07 · 游戏也要管理状态:场景切换·资源加载·对象池实战
前端·javascript·游戏
donecoding41 分钟前
遗嘱、水管与抢救室:TS 切入 Go 的流程控制、接口与并发
javascript·typescript·go
天才熊猫君42 分钟前
📄 第三篇:Vue 3 命令式弹窗 Provide 污染与关闭动画修复
前端·javascript·vue.js
天才熊猫君1 小时前
📄 第一篇:Vue 3 命令式弹窗使用指南
前端·javascript·vue.js
天才熊猫君1 小时前
📄 第二篇:Vue 3 命令式弹窗 provide/inject 机制解析
前端·javascript·vue.js
iReachers1 小时前
HTML打包EXE工具数据加密功能详解 - 加密保护HTML/JS/CSS资源
javascript·css·html·html加密·html转exe·html一键打包exe·exe打包