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;
  }
相关推荐
智商不够_熬夜来凑13 分钟前
【Radio & Checkbox】
前端·javascript·vue.js
xiaofeichaichai21 分钟前
Diff 算法
前端·javascript
wgc2k30 分钟前
Nest.js 基础-8-Hello,NestJS
开发语言·javascript·ecmascript
Larcher33 分钟前
从 0 到 1:用 Bun + axios 快速搭建 LLM API 客户端
前端·javascript
贺今宵43 分钟前
Vue 3 + Capacitor 使用jeep-sqlite,web端使用本地sqlite数据库
前端·数据库·vue.js·sqlite·web
JSMSEMI111 小时前
JSM12N60C 600V N沟道增强型功率MOSFET
开发语言·javascript·ecmascript
零陵上将军_xdr2 小时前
后端转全栈学习-Day6-JavaScript 基础-4
前端·javascript·学习
川冰ICE2 小时前
JavaScript实战②|电商网站交互效果,轮播图与购物车
开发语言·javascript·交互
凌云拓界2 小时前
状态机与思考循环 ——CogitoAgent开发实战(一)
javascript·人工智能·架构·node.js·设计规范
sugar__salt2 小时前
Bun 新一代 JavaScript/TypeScript 运行时:从入门到实战
开发语言·javascript·typescript