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

相关推荐
533_1 小时前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts
Jimmy2 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
Spider_Man2 小时前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
jstart千语2 小时前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长2 小时前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
盗德2 小时前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js
BUG收容所所长2 小时前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
Dolphin_海豚3 小时前
vapor 的 IR 是如何被 generate 到 render 函数的
前端·vue.js·vapor
小妖6663 小时前
Next.js 怎么使用 Chakra UI
前端·javascript·ui
胡西风_foxww4 小时前
从数据丢失到动画流畅:React状态同步与远程数据加载全解析
前端·javascript·react.js·同步·异步·数据·状态