el-table 固定前n行

news2024/11/17 1:43:09

el-table 固定前n行

  1. 第一种,通过设置前几行粘性布局
<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自动滚动,实现轮播,可搭配另一篇的列表轮播一起设置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1800104.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计网期末复习指南(四):网络层(IP协议、IPv4、IPv6、CIDR、ARP、ICMP)

前言&#xff1a;本系列文章旨在通过TCP/IP协议簇自下而上的梳理大致的知识点&#xff0c;从计算机网络体系结构出发到应用层&#xff0c;每一个协议层通过一篇文章进行总结&#xff0c;本系列正在持续更新中... 计网期末复习指南&#xff08;一&#xff09;&#xff1a;计算…

Java 初识

Java 的发展历程 Sun 公司。 Oracle 公司。 普通版本&#xff0c;也叫过渡版本。 正式版本&#xff0c;也叫长期支持版本&#xff08;LTS&#xff09;。 Java SE&#xff0c;Java EE&#xff0c;Java ME Java 技术体系分为三个平台&#xff1a;Java SE&#xff0c;Java EE&a…

【全开源】Fastflow工作流系统(FastAdmin+ThinkPHP)

&#x1f680;Fastflow工作流系统&#xff1a;高效协作&#xff0c;流程无忧​ 一款基于FastAdminThinkPHP开发的可视化工作流程审批插件&#xff0c;帮助用户基于企业业务模式和管理模式自行定义所需的各种流程应用&#xff0c;快速构建企业自身的流程管控体系&#xff0c;快…

Windows mstsc

windows mstsc 局域网远程计算机192.168.0.113为例&#xff0c;远程控制命令mstsc

【mysql】数据报错: incorrect datetime value ‘0000-00-00 00:00:00‘ for column

一、问题原因 时间字段在导入值0000-00-00 00:00:00或者添加 NOT NULL的时间字段时&#xff0c;会往mysql添加0值&#xff0c;此时可能出现此报错。 这是因为当前的MySQL不支持datetime为0&#xff0c;在MySQL5.7版本以上&#xff0c;默认设置sql_mode模式包含NO_ZERO_DATE, N…

SQL Server数据库xp_cmdshell提权笔记

文章目录 一、简介二、搭建环境三、利用条件1、查询 xp_cmdshell 是否开启&#xff0c;返回为1则证明存在2、判断权限是不是sa&#xff0c;回是1说明是sa3、开启xp_cmdshell4、关闭xp_cmdshell 四、获取数据库权限1、成功获取sqlserver&#xff0c;进行登陆2、开启xp_cmdshell权…

记录汇川:红绿灯与HMI-ST

项目要求&#xff1a; 子程序&#xff1a; 子程序&#xff1a; 实际动作如下&#xff1a; 红绿灯与HMI-ST

ChatGPT交卷2024年高考新课标I卷语文关于AI方面的作文试题

2024年新课标I卷作文试题&#xff1a; 阅读下面的材料&#xff0c;根据要求写作。&#xff08;60分&#xff09; 随着互联网的普及、人工智能的应用&#xff0c;越来越多的问题能很快得到答案。那么&#xff0c;我们的问题是否会越来越少&#xff1f; 以上材料引发了你怎样的…

DBeaver入门教学,开源免费,链接数据库的软件

这个可爱的头像就是它 为什么要用这个&#xff0c;小公司一般都用navicat什么的&#xff0c;因为别人一般不会告你&#xff0c;因为告你也没啥钱&#xff0c;但是公司大了有知名度了&#xff0c;用盗版软件就会被告。所以很多好不容易从小做到大的公司&#xff0c;是不允许这种…

使用智谱 GLM-4-9B 和 SiliconCloud 云服务快速构建一个编码类智能体应用

本篇文章我将介绍使用智谱 AI 最新开源的 GLM-4-9B 模型和 GenAI 云服务 SiliconCloud 快速构建一个 RAG 应用&#xff0c;首先我会详细介绍下 GLM-4-9B 模型的能力情况和开源限制&#xff0c;以及 SiliconCloud 的使用介绍&#xff0c;最后构建一个编码类智能体应用作为测试。…

前端解析文件流格式数据异常时并给提示

把后端返回的文件流格式转换成正常数据格式 断点调试返回值 network查看返回值 一、blob类型 let stringData:any await this.blobToString(res); blobToString(blob) { return new Promise((resolve, reject) > { const reader new FileReader(); reader.onloadend (…

Oracle EBS AP发票创建会计科目提示:APP-SQLAP-10710:无法联机创建会计分录

系统版本 RDBMS : 12.1.0.2.0 Oracle Applications : 12.2.6 问题症状: 提交“创建会计科目”请求提示错误信息如下: APP-SQLAP-10710:无法联机创建会计分录。 请提交应付款管理系统会计流程,而不要为此事务处理创建会计分录解决方法 数据修复SQL脚本: UPDATE ap_invoi…

ChatGPT-4o独家揭秘:全国一卷高考语文作文如何轻松斩获满分?

​一、2024年全国一卷高考 二、2018年全国一卷高考 三、2016年全国一卷高考 一、2024年全国一卷高考 技术进步的悖论&#xff1a;我们的问题真的在减少吗&#xff1f; 引言 随着互联网的普及和人工智能的应用&#xff0c;越来越多的问题能够快速得到解答。然而&#xff0c;这引…

二叉树-堆的详解

一&#xff0c;树的概念 1&#xff0c;树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有…

继承-进阶

父子类成员共享 普通成员对象/父子间不共享&#xff0c; 成员独立 函数成员共享&#xff08;函数不存储在对象中&#xff09; 子类由两部分构成&#xff1a;父类中继承的成员和子类中新定义成员 继承方式 子类中存在父类private成员但不可直接访问&#xff08;及时在类中&am…

C语言| 输出菱形*(梳理篇II)

C语言| 输出菱形*-CSDN博客 凡事还是得自己独立思考后&#xff0c;写一遍程序才能发现问题所在。 容易犯的错误&#xff1a; 【完整程序注释】 运行结果 /* 输出菱形 1 总行数 n为奇数&#xff0c;分上三角形下三角形&#xff0c;只考虑左边的空格和星号* 2 上三角形 行数…

【慢慢理解Vue的设计思想】

# 理解Vue的设计思想 MVVM框架的三要素:数据响应式、模板引擎及其渲染数据响应式:监听数据变化并在视图中更新 Object.defineProperty()Proxy模版引擎:提供描述视图的模版语法 插值:{{}}指令:v-bind&#xff0c;v-on&#xff0c;v-model&#xff0c;v-for&#xff0c;v-if渲染:…

能把试卷上的字消除的软件有哪些?推荐三款好用的

能把试卷上的字消除的软件有哪些&#xff1f;在数字化时代&#xff0c;我们越来越依赖科技手段来解决生活中的各种问题。其中&#xff0c;试卷上的字消除问题&#xff0c;就是一个备受关注的痛点。幸运的是&#xff0c;现在市面上已经出现了多款能够轻松消除试卷上字迹的软件&a…

AI日报|智谱AI再降价,同时开源9B系列模型;国内外气象大模型竞逐升级

文章推荐 AI日报&#xff5c;国产大模型迎来新卷王&#xff0c;天工MoE全球首用4090推理&#xff0c;马斯克计划豪掷90亿购买GPU AI日报&#xff5c;斯坦福团队被曝抄袭国内大模型已删库跑路&#xff01;英伟达打破摩尔定律&#xff0c;机器人时代到来 智谱AI全模型矩阵进行…

英码科技推出鸿蒙边缘计算盒子:提升国产化水平,增强AI应用效能,保障数据安全

当前&#xff0c;随着国产化替代趋势的加强&#xff0c;鸿蒙系统Harmony OS也日趋成熟和完善&#xff0c;各行各业都在积极拥抱鸿蒙&#xff1b;那么&#xff0c;边缘计算要加快实现全面国产化&#xff0c;基于鸿蒙系统开发AI应用势在必行。 关于鸿蒙系统及其优势 鸿蒙系统是华…