el-table 固定前n行

el-table 固定前n行

  1. 第一种,通过设置前几行粘性布局
javascript 复制代码
<el-table
 :data="tableData2"
  border
  height="calc(98% - 40px)"
  // 设置行样式
  :row-class-name="TableRowClassName"
  @selection-change="handleSelectionChange"
></el-table>


TableRowClassName(row) {
 // console.log("打印row", row.rowIndex);
  // 这个根据自己需要固定的行或者修改样式的条件去判断
  if (row.rowIndex < 2) {
    return "fixed-row"; //添加class样式
  }
}

//固定前两行
::v-deep .el-table tr.el-table__row.fixed-row {
  position: sticky; //粘性定位
  position: -webkit-sticky;
  z-index: 999;
}
::v-deep .el-table tr.el-table__row.fixed-row:nth-of-type(1) {
  top: 0;
}
::v-deep .el-table tr.el-table__row.fixed-row:nth-of-type(2) {
  top: 90px;
}
  1. 设置两个el-table,第二个表格标题行不显示,缺点是列不一定对齐,需要慢慢调整

ps 如果要配合el-table自动滚动,实现轮播,可搭配另一篇的列表轮播一起设置

相关推荐
HuaHua的世界12 分钟前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
皮实的芒果19 分钟前
前端实时通信方案对比:WebSocket vs SSE vs setInterval 轮询
前端·javascript·性能优化
il25 分钟前
Deepdive into Tanstack Query - 2.0 Query Core 概览
前端·javascript
Shawn59027 分钟前
前端时间管理实践:从时间标准化到工程化封装
前端·javascript
H5开发新纪元29 分钟前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
哟哟耶耶29 分钟前
react-09React生命周期
前端·javascript·react.js
只可远观31 分钟前
Flutter Dart 循环语句 for while do..while break、continue
开发语言·javascript·ecmascript
zwjapple1 小时前
React中createPortal 的详细用法
前端·javascript·react.js
小矮马1 小时前
React-组件通信
前端·javascript·react.js
火星思想2 小时前
你来说说JavaScript作用域
javascript·ecmascript 6