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

相关推荐
GISer_Jinger40 分钟前
Trae Solo模式生成一个旅行足迹App
前端·javascript
zhangbao90s41 分钟前
Intl API:浏览器原生国际化API入门指南
前端·javascript·html
pepedd8641 小时前
深度解剖 Vue3 架构:编译时 + 运行时的协作
前端·vue.js·trae
s3xysteak1 小时前
我要成为vue高手02:数据传递
前端·javascript·vue.js
pepedd8641 小时前
深入理解Vue响应式原理-源码解析
前端·vue.js·trae
Warren981 小时前
Spring Boot 整合网易163邮箱发送邮件实现找回密码功能
数据库·vue.js·spring boot·redis·后端·python·spring
文艺理科生2 小时前
Nuxt 状态管理权威指南:从 useState 到 Pinia
前端·javascript·vue.js
汪子熙2 小时前
解决 Node.js 无法获取本地颁发者证书问题的详细分析与代码示例
javascript·后端
秋秋小事3 小时前
React Hooks UseRef的用法
前端·javascript·react.js
麦麦大数据3 小时前
求职推荐大数据可视化平台招聘系统 Vue+Flask python爬虫 前后端分离
vue.js·爬虫·python·信息可视化·flask·推荐算法·协同过滤