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;
  }
相关推荐
用户629605932470513 小时前
一次位置调整引发的画布失忆:深入 Vue2 虚拟 DOM 复用机制
前端·vue.js
Sterting13 小时前
条件渲染与列表渲染
前端·vue.js
用户8471810541914 小时前
LangChain中间件教程及DeepAgents应用
javascript·agent
huabuyu14 小时前
INP 自动化归因与自愈:如何自动定位、修复并验证一次卡顿
前端·javascript
BreezeJiang14 小时前
浏览器里的 DeepSeek 到底怎么跑起来?关键在 Worker、缓存和流式消息
javascript
BreezeJiang14 小时前
单例模式真正解决的不是“只能 new 一次”,而是统一资源入口
javascript
木公子14 小时前
Vue3源码精读03:响应式核心依赖追踪机制|track与trigger底层源码全解析
前端·vue.js
小林ixn14 小时前
WebGPU + Transformers.js:把 DeepSeek-R1 塞进浏览器,真香!
javascript·llm·gpu
xiaominlaopodaren14 小时前
three.js地图数学基础(四):瓦片金字塔
javascript·gis·three.js
mONESY14 小时前
🔥 React Hooks 进阶实战:受控组件 + 性能优化一站式掌握
javascript