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;
  }
相关推荐
拉不动的猪5 分钟前
深入理解 JavaScript 中的静态属性、原型属性与实例属性
前端·javascript·面试
linda261813 分钟前
链接形式与跳转逻辑总览
前端·javascript
前端付豪23 分钟前
如何使用 Vuex 设计你的数据流
前端·javascript·vue.js
咖啡の猫1 小时前
Vue消息订阅与发布
前端·javascript·vue.js
下一站丶1 小时前
【JavaScript性能优化实战】
开发语言·javascript·性能优化
GIS好难学1 小时前
Three.js 粒子特效实战③:粒子重组效果
开发语言·前端·javascript
刺客_Andy1 小时前
React 第四十七节 Router 中useLinkClickHandler使用详解及开发注意事项案例
前端·javascript·react.js
爱看书的小沐2 小时前
【小沐杂货铺】基于Three.js绘制三维管道Pipe(WebGL、vue、react)
javascript·vue.js·webgl·three.js·管道·pipe·三维管道
w2sfot2 小时前
如何将React自定义语法转化为标准JavaScript语法?
javascript·react
不一样的少年_2 小时前
上班摸鱼看掘金,老板突然出现在身后...
前端·javascript·浏览器