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

相关推荐
前端小巷子3 分钟前
JS打造“九宫格抽奖”
前端·javascript·面试
老华带你飞1 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
Ares-Wang1 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
EveryPossible1 小时前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说1 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
listhi5201 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java1 小时前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
百思可瑞教育6 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋9 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊9 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js