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自动滚动,实现轮播,可搭配另一篇的列表轮播一起设置

相关推荐
轻语呢喃20 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人20 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
LRH24 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
自由逐风24 分钟前
前端小数点精度问题解析
javascript
断竿散人25 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
laperter26 分钟前
js中继承关系杂乱?这篇带你理清
javascript
婉婉耶27 分钟前
VUE带你乘风破浪~
前端·vue.js
小赖同学啊40 分钟前
光伏园区3d系统管理
前端·javascript·3d
前端进阶者1 小时前
js通知提醒
前端·javascript
快起来别睡了1 小时前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript