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;
  }
相关推荐
前端 贾公子17 分钟前
uni-app 也能使用 App.vue?解决 uniapp 无法使用公共组件问题
开发语言·前端·javascript
SuperEugene21 分钟前
Promise 从入门到实战:同步异步、回调地狱、then/catch/finally 全解
前端·javascript·面试
前端 贾公子21 分钟前
uniapp 小程序获取后端的二进制 保存到手机相册
java·前端·javascript
智能工业品检测-奇妙智能24 分钟前
快速直播:Node.js + FFmpeg + flv.js 全栈实战
javascript·ffmpeg·node.js
Thomas.Sir34 分钟前
Vue 3:现代前端框架的架构革命
前端·vue.js·web·大前端
清空mega36 分钟前
《Vue3 模板语法与常用指令详解:插值、绑定、件、条件渲染、列表渲染一次学会》
前端·javascript·vue.js
周淳APP36 分钟前
【HTTP相关及RESTful】风萧萧兮易水寒之壮士学习不复返
前端·javascript·网络·网络协议·http·restful·jsonp
周淳APP42 分钟前
【计算机网络之HTTP、TCP、UDP、HTTPS、Socket网络连接】
前端·javascript·网络·网络协议·http·前端框架
Luna-player1 小时前
将Vue 项目上传到Gitee流程步骤
前端·vue.js·gitee
柳杉1 小时前
精选10套开源数据可视化大屏项目合集 | 从 3D 地球到数字孪生
前端·javascript·数据可视化