当前位置: 首页 > news >正文

去掉el-table表头右侧类名是gutter,width=17px的空白区域(包括表头样式及表格奇偶行样式和表格自动滚动)


代码如下:
 

      <el-table:data="tableData"ref="scroll_Table":header-cell-style="getRowClass":cell-style="styleBack"height="350px"style="width: 100%"><el-table-column prop="id" label="序号"> </el-table-column><el-table-column prop="type" label="能耗分项"> </el-table-column><el-table-column prop="value" label="能耗变化值"> </el-table-column><el-table-column prop="value" label="变化百分比"> </el-table-column></el-table>tableData: [],scrolltimer: "", //自动滚动的定时任务mounted() {this.autoScroll();},beforeDestroy() {this.autoScroll(true);},methods: {// 表头样式getRowClass() {return "background:#00235d; color:#22a2c8;border:1px solid #00235d;text-align:center";},// 表格奇偶层样式styleBack({ rowIndex }) {if ((rowIndex + 1) % 2 === 0) {return "background:#3864b4; color:#22a2c8;border:1px solid #3864b4;text-align:center";} else {return "background:#011c51; color:#22a2c8;border:1px solid #011c51;text-align:center";}},autoScroll(stop) {const table = this.$refs.scroll_Table;const divData = table.$refs.bodyWrapper;if (stop) {window.clearInterval(this.scrolltimer);} else {this.scrolltimer = window.setInterval(() => {divData.scrollTop += 1;if (divData.clientHeight + divData.scrollTop ==divData.scrollHeight) {divData.scrollTop = 0;}}, 150);}},},<style>
.el-table{background: transparent;margin-top:10px;}.el-table::before {height:0;}/deep/.el-table__body-wrapper::-webkit-scrollbar {display: none; /* 隐藏滚动条 */}/deep/.el-table__body{width:100% !important;}// 去掉el-table表头右侧空白区域/deep/.el-table th.gutter{display: none;width:0}/deep/.el-table colgroup col[name='gutter']{display: none;width:0}
</style>

相关文章:

去掉el-table表头右侧类名是gutter,width=17px的空白区域(包括表头样式及表格奇偶行样式和表格自动滚动)

代码如下&#xff1a; <el-table:data"tableData"ref"scroll_Table":header-cell-style"getRowClass":cell-style"styleBack"height"350px"style"width: 100%"><el-table-column prop"id" l…...

3079. 求出加密整数的和

给你一个整数数组 nums &#xff0c;数组中的元素都是 正 整数。定义一个加密函数 encrypt &#xff0c;encrypt(x) 将一个整数 x 中 每一个 数位都用 x 中的 最大 数位替换。比方说 encrypt(523) 555 且 encrypt(213) 333 。 请你返回数组中所有元素加密后的 和 。 示例 1&…...

奶茶店、女装店、餐饮店是高危创业方向,原因如下:

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 现在的俊男靓女们&#xff0c;心中都有一个执念&#xff1a; (1)想证明自己了&#xff0c;开个奶茶去…… (2)想多赚点钱了&#xff0c;加盟餐饮店去…… (3)工作不顺心了&#xff0c;搞个女装店去…… 但凡抱着…...

嵌入式笔试面试刷题(day16)

文章目录 前言一、PWM波形的占空比计算公式是什么&#xff1f;二、ADC和DAC在嵌入式系统中的应用场景有哪些&#xff1f;三、watchdog定时器的作用及其在系统中的使用是什么&#xff1f;四、JTAG接口在嵌入式开发中的作用是什么&#xff1f;五、实时操作系统(RTOS)的任务调度策…...

【MyBatis】MyBatis操作数据库(二):动态SQL、#{}与${}的区别

目录 一、 动态SQL1.1 \<if>标签1.2 \<trim>标签1.3 \<where>标签1.4 \<set>标签1.5 \<foreach>标签1.6 \<include>标签 二、 #{}与${}的区别2.1 #{}是预编译sql&#xff0c;${}是即时sql2.2 SQL注入2.3 #{}性能高于${}2.4 ${}用于排序功能…...

[Zer0pts2020]easy strcmp 分析与加法

查壳 Ubuntu上的64位程序 第一步应该尝试运行一下 啥也不是 (这里我改了程序,原来应该是a1>1) 但是我动调发现a1值是1 我就改了判断 但是还是没什么用 也找不到a2的引用 找一下有没有什么improt调用 发现还是啥也不是 思路这里断了 刚好这个程序几个代码而已 函数看…...

力扣7. 整数反转

给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示例 1&#xff1a; 输…...

Mac/Linux getline 无法读取文件内容(读取内容无法显示)

如下面代码 #include <iostream> #include <fstream>using namespace std;int main() {string file_name "1.txt";std::ifstream file(file_name);if (file.is_open()) {std::string line;while (std::getline(file, line)) {char c line.back();cout…...

NBM 算法【python,算法,机器学习】

朴素贝叶斯法&#xff08;Naive Bayes model&#xff09;是基于贝叶斯定理与特征条件独立假设的分类方法。 贝叶斯定理 P ( A ∣ B ) P ( B ∣ A ) ∗ P ( A ) P ( B ) P(A|B)\frac{P(B|A) * P(A)}{P(B)} P(A∣B)P(B)P(B∣A)∗P(A)​ 其中A表示分类&#xff0c;B表示属性&…...

spark3.0.1版本查询Hbase数据库例子

需求背景 现有需求&#xff0c;需要采用spark查询hbase数据库的数据同步到中间分析库&#xff0c;记录spark集成hbase的简单例子代码 import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.client.{ConnectionFactory, Scan} import org.apach…...

android高效读图方式——Hardwarebuffer读图

安卓上有许许多多使用OpenGL来渲染的原因&#xff0c;比方说做特效/动画/硬解/人脸识别等等。渲染完成后如何从gpu中把数据快速读取出来也是高效图像处理中的重要的一环。 相对于glReadPixel的同步读取方式&#xff0c;安卓GLES3.0提供了更高效快速的Hardwarebuffer读图方式&a…...

悉数六大设计原则

悉数六大设计原则 目录 悉数六大设计原则前言☕谁发明了设计模式设计原则设计原则与设计模式的关系 单一职责什么是单一职责不遵循单一职责原则的设计遵循单一职责原则的设计单一职责的优点示例代码&#xff1a; 里氏替换原则什么是里氏替换原则示例代码&#xff1a;违反里氏替…...

hdfs复习

一.hadoop概述 1.4高&#xff08;优势&#xff09; 1&#xff09;.高可靠性&#xff1a;hadoop底层多个数据副本&#xff0c;即使某个计算节点存储出现故障&#xff0c;不会导致数据丢失。 2&#xff09;.高扩展性&#xff1a;可以动态增加服务器节点。 3&#xff09;.高效…...

css-Ant-Menu 导航菜单更改为左侧列表行选中

1.Ant-Menu导航菜单 导航菜单是一个网站的灵魂&#xff0c;用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航&#xff0c;顶部导航提供全局性的类目和功能&#xff0c;侧边导航提供多级结构来收纳和排列网站架构。 2.具体代码 html <!-- 左侧切换 --><…...

02-CSS3基本样式

目录 1. CSS3简介 1.1 CSS3的兼容情况 1.2 优雅降级和渐进增强的开发思想 2. 新增选择器 2.1 选择相邻兄弟 2.2 匹配选择器 2.3 属性选择器(重点) 2.4 结构性伪类选择器&#xff08;重点&#xff09; 2.4.1 整体结构类型 2.4.2 标签结构类型 2.4.3 指定子元素的序号&…...

USART串口外设

USART介绍 USART&#xff1a;另外我们经常还会遇到串口&#xff0c;叫UART&#xff0c;少了个S&#xff0c;就是通用异步收发器&#xff0c;一般我们串口很少使用这个同步功能&#xff0c;所以USART和UART使用起来&#xff0c;也没有什么区别。 其实这个STM32的USART同步模式&a…...

大模型应用之基于Langchain的测试用例生成

一 用例生成实践效果 在组内的日常工作安排中&#xff0c;持续优化测试技术、提高测试效率始终是重点任务。近期&#xff0c;我们在探索实践使用大模型生成测试用例&#xff0c;期望能够借助其强大的自然语言处理能力&#xff0c;自动化地生成更全面和高质量的测试用例。 当前…...

C++之map

1、标准库的map类型 2、插入数据 #include <map> #include <string> #include <iostream>using namespace std;int main() {map<string, int> mapTest;// 插入到map容器内部的元素是默认按照key从小到大来排序// key类型一定要重载小于号<运算符map…...

【量算分析工具-方位角】GeoServer改造Springboot番外系列六

【量算分析工具-概述】GeoServer改造Springboot番外系列三-CSDN博客 【量算分析工具-水平距离】GeoServer改造Springboot番外系列四-CSDN博客 【量算分析工具-水平面积】GeoServer改造Springboot番外系列五-CSDN博客 【量算分析工具-方位角】GeoServer改造Springboot番外系列…...

【机器学习】机器学习与大模型在人工智能领域的融合应用与性能优化新探索

文章目录 引言机器学习与大模型的基本概念机器学习概述监督学习无监督学习强化学习 大模型概述GPT-3BERTResNetTransformer 机器学习与大模型的融合应用自然语言处理文本生成文本分类机器翻译 图像识别自动驾驶医学影像分析 语音识别智能助手语音转文字 大模型性能优化的新探索…...

Postman接口测试实战:48小时掌握状态码、JSON与断言

1. 这不是又一篇“点点点就完事”的接口测试入门“接口测试小白入门”——光是看到这七个字&#xff0c;我手边的咖啡杯就晃了三下。过去三年&#xff0c;我带过27个刚转行进测试岗的新人&#xff0c;其中21个在入职第一周就卡在“Postman怎么发请求”这一步&#xff1b;还有4个…...

Q-Learning原理与工程实践:从试错记账到智能决策

1. 这不是数学课&#xff0c;是教你怎么让机器“试错成长”——Q-Learning到底在干啥&#xff1f;你有没有带过小孩学骑自行车&#xff1f;一开始扶着后座&#xff0c;他歪歪扭扭往前冲&#xff0c;撞到草坪、蹭到墙边、甚至直接摔进灌木丛——但每次摔倒后&#xff0c;他都会下…...

从0到1搭建AI-PPT流水线,支持中英双语自动适配+品牌VI强制注入(含可运行Python脚本+Power Automate配置包)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;从0到1搭建AI-PPT流水线&#xff0c;支持中英双语自动适配品牌VI强制注入&#xff08;含可运行Python脚本Power Automate配置包&#xff09; 本方案构建端到端自动化PPT生成流水线&#xff0c;输入结构…...

双轴按键摇杆:从电位器原理到Arduino实战应用全解析

1. 项目概述&#xff1a;从“两个电位器”到交互核心如果你拆开一个游戏手柄&#xff0c;或者摆弄过一些航模遥控器&#xff0c;大概率会看到那个可以前后左右拨动的小蘑菇头。这个小东西&#xff0c;就是双轴按键摇杆。乍一看&#xff0c;它结构简单&#xff0c;不就是两个电位…...

京东h5st 3.1反爬机制深度解析与合规调用实践

1. 这不是“加个密”那么简单&#xff1a;h5st 3.1在京东联盟生态里的真实分量你点开京东联盟的推广链接&#xff0c;页面秒开&#xff0c;商品图加载流畅&#xff0c;但当你想用脚本批量抓取商品价格、销量或优惠券信息时&#xff0c;刚发几个请求&#xff0c;接口就返回一个干…...

超自动化巡检:破解运维人员短缺的利器

在数字化转型加速推进的今天&#xff0c;企业IT基础设施正经历着前所未有的指数级增长——物理服务器、虚拟机、容器集群、云原生环境、边缘节点……运维对象的数量与种类日新月异。然而&#xff0c;与之形成鲜明对比的是&#xff0c;运维团队的规模却难以等比扩充。招不到人、…...

LibreSprite:为什么这款开源像素动画软件能成为独立开发者的首选?

LibreSprite&#xff1a;为什么这款开源像素动画软件能成为独立开发者的首选&#xff1f; 【免费下载链接】LibreSprite Animated sprite editor & pixel art tool -- Fork of the last GPLv2 commit of Aseprite 项目地址: https://gitcode.com/gh_mirrors/li/LibreSpri…...

Unity ShaderGraph环境搭建避坑指南:URP/HDRP渲染管线匹配

1. 为什么“环境搭建”是ShaderGraph学习路上第一个真坑 很多人点开Unity ShaderGraph教程&#xff0c;第一眼看到“创建Sub Graph”“连接Base Color节点”&#xff0c;心里一热&#xff1a;这不就是拖拖拽帖&#xff1f;比写HLSL简单多了&#xff01;结果双击打开Shader Gra…...

什么,锐捷极简以太彩光一张网竟然有两幅面孔?

在园区网络的建设中&#xff0c;我们常常面临一个两难选择&#xff1a;教学或办公楼需要大带宽&#xff0c;宿舍或病房楼需要弹性带宽。如果分别建两张网&#xff0c;成本翻倍、运维复杂。 锐捷极简以太彩光方案给出的答案是&#xff1a;一张物理网络&#xff0c;同时融合两种…...

Linux sed 流编辑器实战 —— 批量修改文本、替换、删除、插入(运维必备)

前言sed 是 Linux 最核心的非交互式流编辑器&#xff0c;专门用来批量修改文本、替换字符串、删除行、插入行、注释配置&#xff0c;不用手动打开文件&#xff0c;一条命令搞定批量操作&#xff0c;是运维、开发处理文件的神器。本文从基础语法到正则实战&#xff0c;全覆盖工作…...