vue element-ui 表格横向滚动条在合计项下方

news2025/2/24 20:52:35

目前效果
在这里插入图片描述
需求效果
在这里插入图片描述
1.隐藏bodyWrapper滚动条,显示footerWrapper滚动条
css代码如下:

div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;}
div ::v-deep .el-table__footer-wrapper {overflow-x: auto;border-top: 1px solid #f4f4f4;}

监听footerWrapper滚动条
在el-table上加上ref=“detailTable”

mounted() {
   var tableBody = this.$refs.detailTable.$refs.footerWrapper
   tableBody.addEventListener('scroll', () => {
     const scrollLeft = tableBody.scrollLeft
     this.$refs.detailTable.$refs.bodyWrapper.scrollLeft = scrollLeft
   })
},

参考文章
https://blog.csdn.net/qq_32289849/article/details/125290777?spm=1001.2014.3001.5502

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

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

相关文章

WWW ‘24 | EarnMore: 如何利用强化学习来处理可定制股票池中的投资组合管理问题

WWW 24 | EarnMore: 如何利用强化学习来处理可定制股票池中的投资组合管理问题 原创 QuantML QuantML 2024-04-16 09:04 上海 Content 本文主要探讨了如何利用强化学习(Reinforcement Learning, RL)来处理可定制股票池(Customizable Stock …

关于RA8900CE时钟芯片的使用注意事项

在快节奏的现代社会&#xff0c;时间变得越来越宝贵。对于时钟的电子设计&#xff0c;高精度且低功耗逐渐成为主流。我们就有一个汽车显示屏的时钟显示项目&#xff0c;要求时钟一天的误差控制在1s以内。要想达到此要求&#xff0c;则必须满足晶振的频率偏差PPM<1/60/60/24*…

【Hadoop大数据技术】——Sqoop数据迁移(学习笔记)

&#x1f4d6; 前言&#xff1a;在实际开发中&#xff0c;有时候需要将HDFS或Hive上的数据导出到传统关系型数据库中&#xff08;如MySQL、Oracle等&#xff09;&#xff0c;或者将传统关系型数据库中的数据导入到HDFS或Hive上&#xff0c;如果通过人工手动进行数据迁移的话&am…

微博聚类文本分析和可视化

本文使用python抓取微博数据并对微博文本分析和可视化&#xff0c;LDA&#xff08;树图&#xff09;、关系图、词云、时间趋势&#xff08;折线图&#xff09;、热度地图、词典情感分析&#xff08;饼图和3D柱状图&#xff09;、词向量神经网络情感分析、tfidf聚类、词向量聚类…

go语言并发实战——日志收集系统(四) 利用tail包实现对日志文件的实时监控

Linux中的tail命令 tail 命令是一个在 Unix/Linux 操作系统上用来显示文件末尾内容的命令。它可以显示文件的最后几行内容&#xff0c;默认情况下显示文件的最后 10 行。tail 命令 非常有用&#xff0c;特别是在我们查看日志文件或者监视文件变化时。 基本用法如下&#xff1a…

搭建sql-lab出现的php不兼容

下载不了的时候&#xff0c;直接打开该网址下载5.xphp版本&#xff0c;解压到C:\php_studyv8\phpstudy\phpstudy_pro\Extensions\php&#xff08;可能路径都不一样&#xff0c;找到Extensions\php放到该目录下&#xff09;

Excel模板导入、导出工具类

1.引入maven依赖&#xff0c;利用hutool的excel读取 Hutool-poi对excel读取、写入 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency> <depen…

期权小知识科普

期权的交易时间 上交所期权合约的交易时间为每个交易日9:15至9:25、9:30至11:30、13&#xff1a;00至15:00。 其中&#xff0c;9:15至9:25为开盘集合竞价时间&#xff0c;14:57-15:00为收盘集合竞价时间&#xff0c;其余时段为连续竞价时间&#xff0c;交易所规则另有规定的除…

后台管理系统加水印(react)

效果 代码图片 代码 window.waterMark function (config) {var defaultConfig {content: 我是水印,fontSize: 16px,opacity: 0.3,rotate: -15,color: #ADADAD,modalId: J_waterMarkModalByXHMAndDHL,};config Object.assign({}, defaultConfig, config);var existMarkModal…

Hadoop3:大数据的基本介绍

一、什么是大数据 1、大数据的4v特点 Volume&#xff08;大量&#xff09; Velocity&#xff08;高速&#xff09; Variety&#xff08;多样&#xff09; Value&#xff08;低价值密度&#xff09; 2、大数据部门间的工作岗位 第三部分&#xff0c;其实就是JavaWeb 二、…

李沐53_语言模型——自学笔记

语言模型 1.预测文本序列出现的概率 2.应用在做预训练模型 3.生成文本&#xff0c;给定前面几个词&#xff0c;不断生成后续文本 4.判断多个序列中哪个更常见 真实数据集的统计 《时光机器》数据集构建词表&#xff0c; 并打印前10个最常用的&#xff08;频率最高的&…

4.4 @ControllerAdvice全局数据处理

顾名思义&#xff0c;&#xff20;ControllerAdvice 就是&#xff20;Controller 增强版。&#xff20;ControllerAdvice 主要用来处理全 局数据 ,一般搭配&#xff20;ExceptionHandler、&#xff20;ModelAttribute 及&#xff20;InitBinder 使用。 1. 全局异常处理&#x…

密文字段模糊检索方案

代码地址: https://github.com/zuiyu-main/EncryptDemo https://mp.weixin.qq.com/s/cXOg1tiMtJz2eibDZmXHUQ 在个别特殊领域中&#xff0c;数据的安全问题是非常的重要的&#xff0c;所以需要数据库存储的数据是需要加密存储的。所以也就引申出来本文这个问题&#xff0c;加密…

【C语言__动态内存管理__复习篇6】

目录 前言 一、动态内存管理 二、动态内存函数 2.1 malloc 2.2 free 2.3 calloc 2.4 realloc 三、动态内存常见的6个使用错误 3.1 接收malloc/calloc返回的参数后未及时检查是否为NULL 3.2 越界访问动态内存空间 3.3 对非动态开辟的内存使用free释放 3.4 使用free只释放了…

STM32学习和实践笔记(17):STM32外部中断(EXTI)的整体介绍

1.外部中断介绍 1.1 EXTI简介 STM32F10x外部中断/事件控制器&#xff08;EXTI&#xff09;包含多达 20 个用于产生事件/中断请求的边沿检测器。&#xff08;事件与中断的区别&#xff0c;可参看STM32---中断与事件的区别_中断和事件的区别-CSDN博客&#xff09; 具体有哪些&a…

蓝桥杯2024年第十五届省赛真题-爬山

贪心优先队列的题&#xff0c;贪心会漏一个情况&#xff0c;不知道怎么处理&#xff0c;这里直接打表了 2 1 1 48 49 答案是30&#xff0c;贪心是31 专有名词&#xff1a;hack-有新的测试点过不了 #include<bits/stdc.h> using namespace std; #define endl \n #define …

AI容器化部署开发尝试 (一)(Pycharm连接docker,并部署django测试)

注意&#xff1a;从 Docker 19.03 开始&#xff0c;Docker 引入了对 NVIDIA GPU 的原生支持&#xff0c;因此若AI要调用GPU算力的话docker版本也是有要求的&#xff0c;后面博客测试。 当然本篇博客还没设计到GPU的调用&#xff0c;主要Pycharm加Anaconda的方案用习惯了&#…

【配电网故障定位】基于二进制矮猫鼬优化算法的配电网故障定位 33节点配电系统故障定位【Matlab代码#82】

文章目录 【获取资源请见文章第6节&#xff1a;资源获取】1. 配电网故障定位2. 二进制矮猫鼬优化算法3. 算例展示4. 部分代码展示5. 仿真结果展示6. 资源获取 【获取资源请见文章第6节&#xff1a;资源获取】 1. 配电网故障定位 配电系统故障定位&#xff0c;即在配电网络发生…

JavaScript算数运算符

源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> <b…

mars3d实现禁止地图移动,禁止地图左右平移,但是鼠标可以移动的效果。

new mars3d.layer.GeoJsonLayer({渲染后实现鼠标左键按住不释放拖动时&#xff0c;地图不跟着拖动效果 当前问题&#xff1a; 1.在map初始化&#xff0c;或者是加载效果的时候&#xff0c;整个地球的场景都是一样的。 如果鼠标左键按住不释放&#xff0c;在屏幕上拖动的时候…