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;
  }
相关推荐
Yeats_Liao2 分钟前
后台 Sidebar 伸缩交互(PC + 移动端)实现
前端·javascript·css·html5
MXN_小南学前端7 分钟前
computed 计算属性详解:触发时机、实战场景、Vue2 与 Vue3 对比
前端·javascript·vue.js
isNotNullX15 分钟前
数据大屏怎么做?数据大屏有哪四个核心环节
开发语言·前端·javascript
六月的可乐38 分钟前
知识库检索入门:从普通 RAG、知识图谱 RAG 到 LLM Wiki,一篇讲清原理、区别与选型
vue.js·人工智能·openai
竹林81840 分钟前
Web3表单签名验证:我如何用 wagmi 和 siwe 让用户“无密码”登录
javascript
inksci1 小时前
使用飞帆的上传组件
前端·javascript
FOREVER-Q1 小时前
基于 Vite 的前端 SDK 工程化设计与模块化构建实践
开发语言·前端·javascript
James_WangA1 小时前
3D 数字孪生联调实录:打通上位机与浏览器的最后一公里
vue.js
耗子君QAQ1 小时前
为什么 AI 写代码也需要说明书?
前端·javascript·ai编程
h_65432101 小时前
公告/消息提示从右向左循环滚动vue
前端·javascript·vue.js