原生js仿el-table动态表头
- 解决动态表头数据量过大导致页面卡顿的问题
- 解决固定前几列导致表头设置宽度失效或者错位的问题
- 功能：
- 固定前几列
- 合并指定单元格
<div class="tableJoint2"><div><table id="tableData"></table></div><div><table id="tableData-2"></table></div></div>
renderTable(id, data, columns) {// 根据顺序写tableJoint2容器的高度let tableJoint2Height = [246, 400];// id 第一个表格id data 数据 columns 表头// 固定前几列需要拆分为两个表格// 第一个表头let columnsData = [];// 第二个表头let columnsData2 = [];// 一个页面有多个地方用，固定的前几列数量不同，做了判断if (id === "tableData") {// 第一个表格固定前两列columnsData = [...columns].slice(0, 2);// 大于2，把剩下的表头赋值给第二个表格if (columns.length > 2) {columnsData2 = [...columns].slice(2, columns.length);}}// js动态渲染两个tableconst table = document.getElementById(id);table.style.height = "100%";table.style["borderCollapse"] = "collapse";table.style["color"] = "#606266";table.style.width = "100%";// 第二个表格的id用第一个表格id+'-2'命名const table2 = document.getElementById(id + "-2");table2.style.height = "100%";table2.style["borderCollapse"] = "collapse";table2.style["color"] = "#606266";table2.style.width = "100%";this.$nextTick(() => {// 获取两个表格的父元素const tableJoint2 = document.getElementsByClassName("tableJoint2");for (let i = 0; i < tableJoint2.length; i++) {// 使用flex布局，使两个表格并列tableJoint2[i].style.display = "flex";tableJoint2[i].style.width = "100%";// 高度必须设置,tableJoint2[i].style.height = tableJoint2Height[i] + "px";// divDoms获取两个表格中的直接divlet divDoms = tableJoint2[i].querySelectorAll("div");for (let a = 0; a < divDoms.length; a++) {divDoms[a].style.height = "100%";if (a === 1) {// 加行向滚动divDoms[a].style.overflow = "auto";divDoms[a].style.flex = 1;// 第二个表格出现行向滚动条会导致两边行向数据位置偏差，如果table2的宽度大于父元素的宽度，重新设置第一个表格的高度-滚动条的高度let table2Copy = divDoms[a].querySelector("table");if (table2Copy.scrollWidth > divDoms[a].clientWidth) {table.style.height = table.clientHeight - 3 + "px";}}}}});let tableHead = "<thead><tr>";let tableHead2 = "<thead><tr>";let tableBody = "<tbody>";let tableBody2 = "<tbody>";// 生成表头columnsData.forEach((column) => {// 表头样式根据需求写tableHead += `<th style="background:#eeeeee;color:'#333';fontSize:14px;font-weight:400 !important;border:1px solid #ebeef5;padding:0 50px;height:30px;white-space:nowrap"><span>${column.label}</span></th>`;});columnsData2.forEach((column) => {// 表头样式根据需求写tableHead2 += `<th style="background:#eeeeee;color:'#333';fontSize:14px;font-weight:400 !important;border:1px solid #ebeef5;padding:0 50px;height:30px;white-space:nowrap"><span>${column.label}</span></th>`;});tableHead += "</tr></thead>";tableHead2 += "</tr></thead>";// 生成表身 promptMessagedata.forEach((row, index) => {tableBody += "<tr>";tableBody2 += "<tr>";columnsData.forEach((column) => {// 单元格数据和样式// data-index和data-date是给点击事件传值，属性为index和datetableBody += `<td data-index=${index} data-date=${column.label} style="border:1px solid #ebeef5;text-align:${column.align || "center"};padding:0 10px;height:30px;white-space:nowrap;color:"#606266"">${row[column.prop] || "--"}</td>`;});columnsData2.forEach((column) => {// 单元格数据和样式tableBody2 += `<td data-index=${index} data-date=${column.label} style="border:1px solid #ebeef5;text-align:${column.align || "center"};padding:0 10px;height:30px;white-space:nowrap;color:"#606266"">${row[column.prop] || "--"}</td>`;});tableBody += "</tr>";tableBody2 += "</tr>";});// 插入表头和表身到表格中table.innerHTML = `${tableHead}${tableBody}</tbody>`;table2.innerHTML = `${tableHead2}${tableBody2}</tbody>`;// 点击事件let tbody = table.querySelectorAll('tbody')[0]let tbodyTr = tbody.querySelectorAll('tr')for (let i = 0; i < tbodyTr.length; i++) {let td = tbodyTr[i].querySelectorAll('td')for (let j = 0; j < td.length; j++) {td[j].addEventListener('click', (event) => {// 获取传递过来的值let td = event.targetlet flg = td.getAttribute('data-flg')let index = Number(td.getAttribute('data-index'))let date = td.getAttribute('data-date')console.log(date)})}}this.$nextTick(() => {this.mergeFunc(id)})},//合并相同行mergeFunc(tableId) {if(tableId === 'myTable2') returnvar tab = document.getElementById(tableId);var maxCol = 3;//maxcol用于设置需要合并的列数var count, start;for (var col = maxCol - 1; col >= 0; col--) {//用于存储相同个数count = 1;for (var i = 0; i < tab.rows.length; i++) {if (i > 0 && col > 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML&& tab.rows[i].cells[col - 1].innerHTML == tab.rows[i - 1].cells[col - 1].innerHTML) {count++;} else if (i > 0 && col == 0 && tab.rows[i].cells[col].innerHTML == tab.rows[i - 1].cells[col].innerHTML) {count++;} else {if (count > 1) {//合并start = i - count;tab.rows[start].cells[col].rowSpan = count;for (var j = start + 1; j < i; j++) { //tab.rows[j].removeChild(tab.rows[j].cells[col]);}count = 1;}}}if (count > 1) { //合并，最后几行相同的情况下start = i - count;tab.rows[start].cells[col].rowSpan = count;for (var j = start + 1; j < i; j++) {tab.rows[j].removeChild(tab.rows[j].cells[col]);}}}},
相关文章：
原生js仿el-table动态表头
解决动态表头数据量过大导致页面卡顿的问题解决固定前几列导致表头设置宽度失效或者错位的问题功能： 固定前几列合并指定单元格 <div class"tableJoint2"><div><table id"tableData"></table></div><div>…...
【opencv入门教程】9.视频加载
文章选自： 一、VideoCapture类 用于从视频文件、图像序列或摄像头捕获视频的类。函数：CV_WRAP VideoCapture();brief 默认构造函数CV_WRAP explicit VideoCapture(const String& filename, int apiPreference CAP_ANY);brief 使用 API 首选项打开…...
数据结构 ——无头单链表
数据结构 ——无头单链表 一、无头单链表的定义与特性 1、单链表简介 单链表是一种常见的基础数据结构，它由一系列节点组成，每个节点包含数据部分和指向下一个节点的指针。无头单链表是单链表的一种变体，其特点是没有明确的头节点࿰…...
【UE5】制作插件 并调试【vs2022】
视频教程：好看视频-轻松有收获 https://www.youtube.com/watch?vIjpa9mI2b5I 原文：【UE】制作插件_ue插件-CSDN博客 C制作插件 1. 我们可以在C工程中创建更多类型的插件，这里我们选择“空白”作为模板来创建插件 点击“创建插件”按钮后…...
Prometheus 采集postgresql监控数据
postgres_exporter 前言 postgres_exporter 是一个用于监控 PostgreSQL 数据库的 Prometheus 导出器。它允许你收集有关 PostgreSQL 数据库性能和状态的指标，并将这些指标暴露给 Prometheus，从而可以在 Grafana 等可视化工具中进行展示和告警。 postgres_exporter download…...
网络分层模型（ OSI、TCP/IP、五层协议）
1、网络分层模型 计算机网络是一个极其复杂的系统。想象一下最简单的情况：两台连接在网络上的计算机需要相互传输文件。不仅需要确保存在一条传输数据的通路，还需要完成以下几项工作： 发起通信的计算机必须激活数据通路，这包括发…...
POI遍历行所有单元格的两种方式，getPhysicalNumberOfCells方式有问题，勿用
今天看POI源码的时候，发现HSSFWorkbook类型的工作簿，行数据是用TreeMap<Integer, HSSFRow>存储的，列数据是用HSSFCell[]数组来存的；XSSFWorkbook类型的工作簿，行数据是用SortedMap<Integer, XSSFRow>存储的…...
Latex转word（docx）或者说PDF转word 一个相对靠谱的方式
0. 前言 投文章过程中总会有各种各样的要求，其中提供word格式的手稿往往是令我头疼的一件事。尤其在多公式的文章中，其中公式转换是一个头疼的地方，还有很多图表，格式等等，想想就让人头疼欲裂。实践中摸索出一条相对靠…...
敖汉宝塔油页岩露天矿山安全自动化监测
1. 项目简介 本次项目位于内蒙古自治区赤峰市敖汉旗宝国吐乡大青山村，地理位置好。主营许可经营项目：无一般经营项目：页岩油生产；页岩油、润滑油、建筑材料（不含油漆）销售等单位规模1-20人，单位…...
Android笔记【14】结合LaunchedEffect实现计时器功能。
一、问题 cy老师第五次作业 结合LaunchedEffect实现计时器功能。要求：动态计时，每秒修改时间，计时的时间格式为“00：00：00”（小时：分钟：秒）提交源代码的文本和运行截图…...
)
三维重建(单目、双目、多目、点云、SFM、SLAM)
1 相机几何与标定1.1 相机模型中的坐标系1.2 四种坐标系之间的转换1.3 相机内参1.4 相机标定 2 传统三维重建2.1 RGBD三维重建2.1.1 KinectFusion2.1.2 BundleFusion 2.1 MVS三维重建2.2.1 COLMAP2.2.2 OpenMVS 3 点云三维重建3.1 3D点云任务3.2 点云数据3.3 特征提取3.3.1 Poi…...
软体机器人动态手内笔旋转研究
人工智能咨询培训老师叶梓 转载标明出处 软体机器人因其在安全互动方面的优势而备受关注，但在高速动态任务中却面临挑战。最近，卡内基梅隆大学机器人研究所的研究团队提出了一种名为SWIFT的系统，旨在通过学习和试错来实现软体机器人手的动态…...
福昕PDF低代码平台
福昕PDF低代码平台简介 福昕PDF 低代码平台是一款创新的工具，旨在简化PDF处理和管理的流程。通过这个平台，用户可以通过简单的拖拽界面上的按钮，轻松完成对Cloud API的调用工作流，而无需编写复杂的代码。这使得即使没有编程经验的…...
【笔记】Linux中使用到的一些操作
1、查找指定文件并执行删除 find . -name "checkpoint_*_*.pth" -type f -exec rm -f {} \; 2、查看每个文件夹占用空间 du -h --max-depth1 3、移动文件 mv valid.zip ./xg mv 文件 目标位置 4、删除文件夹 rmdir folder rm -r folder # 递归删除文件夹下所有内容…...
深入浅出：PHP中的表单处理全解析
引言 在Web开发的世界里，表单是用户与服务器之间交互的重要桥梁。它们允许用户提交信息，并通过后端语言（如PHP）进行处理。本文将带你深入了解PHP中的表单处理，从基础的创建和提交到高级的安全措施和实用技巧ÿ…...
智已汽车x-signature 登录算法 签到
智已汽车x-signature 登录算法 签到 python代码成品...
一、测试工具LoadRunner Professional脚本编写-录制前设置
设置基于URL的脚本 原因：基于HTML的脚本会导致login接口不能正确录制 设置UTF-8 原因：不勾选此项会导致脚本中文变为乱码...
LSTM+改进的itransformer时间序列预测模型代码
代码在最后 本次设计了一个LSTM基于差分多头注意力机制的改进的iTransformer时间序列预测模型结合了LSTM（长短期记忆网络）和改进版的iTransformer（差分多头注意力机制），具备以下优势： 时序特征建模能力&am…...
linux中 Systemd 和 cgroups 的关系详解
systemd 是 Linux 的一个初始化系统和服务管理器，它依赖于 Linux 内核的 cgroups（Control Groups）功能来实现对系统资源的高效管理。以下是对两者关系的详细解读： 1. 什么是 cgroups？ cgroups 是 Linux 内核提供的一种…...
发布Apache2.4** 局域网无法访问
1。 防火墙关闭 或者 设置入站规则 2，查看httpd.conf 文件 设置配置 原 Listen 80 修改成 Listen 192.168.31.127:90 3.确保 本地IP 是否正确...
【JAVA】Java高级：多数据源管理与Sharding：在Spring Boot应用中实现多数据源的管理
一个电商平台可能需要一个数据库来存储用户信息，另一个数据库来存储订单信息，甚至可能还有一个数据库用于数据分析。这种情况下，如何在Spring Boot应用中实现多数据源的管理就显得尤为重要。 1. 多数据源管理的重要性 在实际应用中…...
Android 分词的两种方式
前言： 本文分别介绍了原生和三方(Jieba)两种分词方式的使用和注意事项 1、安卓原生BreakIterator分词 比较简单，但是效果不太行 /*** 功能：原生分词* 参数：text：需要分词的语句* 返回值：return…...
【开源免费】基于SpringBoot+Vue.JS中小型医院网站（JAVA毕业设计）
博主说明：本文项目编号 T 078 ，文末自助获取源码 \color{red}{T078，文末自助获取源码} T078，文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...
数据结构代码归纳
1.线性表 线性表的顺序表示 定义与初始化 typedef struct SqList{ElemType data[MaxSize];//ElemType *data 开动态数组 int length; }Sqlist; void InitList(SqList &L){L.length0;//若静态数组//若动态数组 //L.data(ElemType*)malloc(sizeof(ElemType)*MaxSize); }…...
2024-金盾信安杯线上赛 WP
Misc 大赛宗旨 记事本打开，一眼零宽隐写 B 神工具一把梭，得到一串 base 编码 base64 解码得到 flag flag 值：flag{5d5555fa-1303-4b43-8eef-d6ea7c64c361} esab 根据题目 esab 可以发现这正是 base 的逆向，所以可以先逆向一下…...
iOS如何自定义一个类似UITextView的本文编辑View
对于IOS涉及文本输入常用的两个View是UITextView和UITextField，一个用于复杂文本输入，一个用于简单文本输入，在大多数开发中涉及文本输入的场景使用这两个View能够满足需求。但是对于富文本编辑相关的开发，这两个View就无法满足自…...
JavaWeb文件上传
文件上传总览 文件上传主要是指将本地文件（包括但不限于图片、视频、音频等）上传到服务器，提供其他用户浏览或下载的过程。在日常生活中，我们在很多情况下都需要使用文件上传功能，比如：发微博、发朋友圈等…...
C#实现1ms定时器不精准？如何实现一个高性能高精度的1ms定时器？（附完整示例Demo）
在C#日常开发中，我们经常需要使用定时器（Timer）进行周期性任务的执行。 例如，每隔1秒打印一条日志，或每隔100毫秒执行某个数据刷新逻辑。 但是，当我们尝试在C#中实现一个1毫秒（1ms）…...
LeetCode 3. 无重复字符的最长子串
题目链接：3. 无重复字符的最长子串 首先想到的就是暴力破解，直接两层循环遍历，因为它说求无重复，那就可以用 set 来存储遍历到的字符，如果遍历到了同样的字符(在 set 中存在)，就直接跳出第二层循环&#x…...
)
深度解析 Ansible：核心组件、配置、Playbook 全流程与 YAML 奥秘(上)
文章目录 一、ansible的主要组成部分二、安装三、相关文件四、ansible配置文件五、ansible 系列 一、ansible的主要组成部分 ansible playbook：任务剧本（任务集），编排定义ansible任务集的配置文件，由ansible顺序依次执…...
记一次由docker容器使得服务器cpu占满密码和密钥无法访问bug
Bug场景： 前几天在服务器上部署了一个免费影视网站，这个应用需要四个容器，同时之前的建站软件workpress也是使用docker部署的，也使用了三个容器。在使用workpress之前，我将影视软件的容器全部停止。 再使用workpress…...
功能篇：JAVA实现记住我功能
在Java Web应用程序中实现“记住我”功能，通常涉及以下几个步骤： 1. 创建一个持久化的标识符（如一个令牌或哈希值），并将其与用户账户关联。 2. 将这个标识符保存到客户端的cookie中。 3. 在服务器端，当用户…...
实现 DataGridView 下拉列表功能（C# WinForms）
本文介绍如何在 WinForms 中使用 DataGridViewComboBoxColumn 实现下拉列表功能，并通过事件响应来处理用户的选择。以下是实现步骤和示例代码。 1. 效果展示 该程序的主要功能是展示如何在 DataGridView 中插入下拉列表，并在选择某一项时触发事件。 2.…...
2024年上半年网络工程师综合知识真题及答案解析
2024年上半年网络工程师综合知识真题及答案解析 以下不属于5G网络优点的是（）A．传输过程中消耗的资源少，对设备的电池更友好B．支持大规模物联网，能够连接大量低功耗设备，提供更高效的管理C．引入了网络切片技术，允许将物理网络划分为多个虚拟网络D．更好的安全性，采用更…...
数合平台功能-管理角色
前一阵，有朋友问到，看咱们产品的功能描述很强大，但很多功能看不到。为此，基于数据建模产品最新版本，和大家一起串一下产品的功能和使用路径。本节重点说一下管理角色有哪些功能 一、功能清单 从上图中可以看到&#x…...
 使用指南)
LVGL9 开关控件 (lv_switch) 使用指南
文章目录 前言主体1. **控件概述**2. **控件的样式和组成部分**3. **使用控件**改变开关状态 4. **事件处理**5. **按键支持**6. **示例代码** 总结 前言 lv_switch 是 LittlevGL 提供的一个开关控件，外观类似一个小型滑块，常用于实现开关功能ÿ…...
麒麟 V10 系统（arm64/aarch64）离线安装 docker 和 docker-compose
前期准备 查看操作系统版本，跟本文标题核对一下 uname -a查看操作系统架构 uname -m下载离线包 下载 docker 离线包 地址：https://download.docker.com/linux/static/stable/ 选择系统架构对应的文件目录：aarch64，我目前使用…...
独立ip服务器有什么优点?
网站的性能和安全性直接影响到用户体验和业务发，独立IP服务器作为一种主流的托管方式，因其独特的优势而受到许多企业和个人站长的青睐。与共享IP相比，独立IP服务器到底有哪些优点呢？ 使用独立IP的用户不必担心与其他网站共享同一…...
oracle之用户的相关操作
（1）创建用户(sys用户下操作) 简单创建用户如下： CREATE USER username IDENTIFIED BY password; 如果需要自定义更多的信息，如用户使用的表空间等，可以使用如下： CREATE USER mall IDENTIFIED BY 12345…...
深入浅出：PHP中的数组操作全解析
文章目录 引言理解数组创建数组使用方括号使用array()函数 访问数组元素数值索引数组关联数组 遍历数组使用for循环使用foreach循环 添加和修改数组元素添加元素修改元素 删除数组元素删除单个元素删除整个数组 多维数组创建多维数组访问多维数组元素 常用数组函数获取数组长度…...
2024年12月7日历史上的今天大事件早读
1732年12月07日英国皇家大剧院在伦敦开幕 1798年12月07日清代诗人袁枚逝世 1889年12月07日第一个充气轮胎受专利保护 1916年12月07日劳合-乔治出任英国首相 1926年12月07日第一台电冰箱受美国专利保护 1937年12月07日南京保卫战正式打响 1941年12月07日日本偷袭珍珠港 1…...
pymysql模块详解
华子目录 简介安装pymysql连接对象常用方法游标对象常用方法数据库操作查改批量增加删 使用with语句总结 简介 pymysql是一个用于Python编程的第三方模块，用于连接和操作MySQL数据库。它提供了一个简单而强大的接口，使开发者能够轻松地在Python程序中执…...
计算机网络研究实训室建设方案
一、概述 本方案旨在规划并实施一个先进的计算机网络研究实训室，旨在为学生提供一个深入学习、实践和研究网络技术的平台。实训室将集教学、实验、研究于一体，覆盖网络基础、网络架构、网络安全、网络管理等多个领域，以培养具备扎实理论基础…...
WEB安全 PHP学习
PHP基础 PHP编码显示问题 header ("Content-type: text/html; charsetgb2312"); header("Content-Type: text/html;charsetutf-8"); windows需要使用gbk编码显示 源码是 <?php header ("Content-type: text/html; charsetgb2312"); sys…...
Redis高阶之容错切换
当一台主机master宕掉之后，他的从机会取代主机么？ 查看集群状态 127.0.0.1:6385> cluster nodes c8ff33e8da5fd8ef821c65974dda304d2e3327f9 192.168.58.129:638216382 slave f6b1fd5e58df90782f602b484c2011d52fc3482d 0 1733220836918 1 connecte…...
构建高效OTA旅游平台的技术指南
1. 引言 在信息技术高速发展的今天，互联网深刻地改变了人们的旅行方式。传统的旅行社模式逐渐被在线旅游平台所取代，OTA（Online Travel Agency，在线旅行社）旅游平台应运而生，成为人们获取旅游信息、预订旅…...
数据结构 （25）图的存储结构
前言 数据结构中的图是一种用于表示多对多关系的结构，其存储结构主要有两种：邻接矩阵和邻接表。 一、邻接矩阵 定义：邻接矩阵是一个二维数组，用于存储图中各个顶点之间的关系。数组的行和列分别代表图中的顶点，元素的值…...
【C语言】fscanf 和 fprintf函数
【C语言】fscanf 和 fprintf函数 文章目录 [TOC](文章目录) 前言一、定义二、代码例程三、实验结果四、参考文献总结 前言 使用工具： 1.编译器：DEVC 2.C Primer Plus 第六版-1 提示：以下是本篇文章正文内容，下面案例可供参考 一…...
C#调用c++创建的动态链接库dll文件
在C#中调用外部DLL文件是一种常见的编程实践，它具有以下几个重要意义：1.代码重用；2.模块化；3.性能优化；4.安全性；5.跨平台兼容性；6.方便更新和维护；7.利用特定技术或框架；…...
【数字电路与逻辑设计】实验一 序列检测器
文章总览：YuanDaiMa2048博客文章总览 【数字电路与逻辑设计】实验一 序列检测器 一、实验内容二、设计过程（一）作出状态图或状态表（二）状态化简（三）状态编码 三、源代码（一ÿ…...