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

目前效果
在这里插入图片描述
需求效果
在这里插入图片描述
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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

git的安装与配置教程--超详细版

一、git的安装 1. 官网下载git git官网地址:https://git-scm.com/download/win/ 选择需要的版本进行下载 2、下载完成之后,双击下载好的exe文件进行安装。 3、默认是C盘,推荐修改一下路径,然后点击下一步 4、Git配置&#xff…

电子邮箱是什么?电子邮箱怎么申请注册?

虽然通过电子邮箱收发邮件办公已经成为常态,但是很多人不清楚电子邮箱是什么?电子邮箱是指通过网络传递的“邮局”,可以用来收发电子邮件。每个人的电子邮箱地址都是唯一的,确保他人的邮件能准确送到我们的电子邮箱之中。电子邮箱…

CRMEB pro版/多门店商城系统客服配置教程

客服功能配置介绍 功能提示: Pro v2.0系统采用swoole框架,客服不需要单独配置,按照正常安装流程配置好程序即可使用! 如出现客服无法使用,请检查: 1.消息队列是否正常 2.重启swoole 一、功能介绍 CRMEB商城…

刷课必备!用Python实现网上自动做题

前言 开学少不了老师会布置一些 软件上面的作业,今天教大家用python制作自动答题脚本,100%准确率哦喜欢的同学记得关注、收藏哦 环境使用 Python3.8Pycharm 模块使用 import requests —> 数据请求模块 pip install requestsimport parsel —>…

GPU 之争:训练大模型的显卡规格大比拼

训练大模型有多烧钱?(含常用GPU规格比较) 训练大模型有多烧钱? 解锁大型语言模型的运行秘诀大型语言模型 (LLM) 对硬件要求很高,其中显卡内存至关重要。Meta 的 LLaMA 2 模型提供了规模不等的选项:* 70B 模…

C++/Qt 小知识记录5

工作中遇到的一些小问题,总结的小知识记录:C/Qt 小知识5 Windows下查看端口占用情况C调用Python三方库测试库有没有被加上的测试方法初始化使用Python的env环境,用Py_SetPythonHome设置GDAL相关的,需要把osgeo、rasterio的路径加入…

js some对比forEach

some&#xff1a;return true可以停止循环 forEach&#xff1a;return true无法停止循环 <!DOCTYPE html> <html ng-app"my_app"><head><script type"text/javascript">const array [10, 20, 30];const targetValue 10;// 检测…

分析 MyBatis/MyBatis-Plus 慢 SQL 的分析组件 --SQL 慢镜️‍♀️

大家好&#xff01;我是聪ζ&#x1f331;我做了一个分析 MyBatis/MyBatis-Plus 慢 SQL 的分析组件 --SQL 慢镜&#x1f575;️‍♀️ GitHub仓库地址&#x1f680;: https://github.com/lhccong/sql-slow-mirror 点点 star 我的朋友们✨ 背景&#x1f9ca;&#xff1a; 大家…

yolov8 区域声光报警+计数

yolov8 区域报警计数 1. 基础2. 报警功能2. 1声音报警代码2. 2画面显示报警代码 3. 完整代码4. 源码 1. 基础 本项目是在 yolov8 区域多类别计数 的基础上实现的&#xff0c;具体区域计数原理可见上边文章 2. 报警功能 设置一个区域region_points&#xff0c;当行人这一类别…

SpringBoot整合Swagger2

SpringBoot整合Swagger2 1.什么是Swagger2&#xff1f;&#xff08;应用场景&#xff09;2.项目中如何使用2.1 导入依赖2.2 编写配置类2.3 注解使用2.3.1 controller注解&#xff1a;2.3.2 方法注解2.3.3 实体类注解2.3.4 方法返回值注解2.3.5 忽略的方法 3.UI界面 1.什么是Swa…

FPGA组合逻辑电路设计之译码器

在数字电路中可以根据电路功能的不同分为&#xff0c;组合逻辑电路与时序逻辑电路。组合逻辑 电路在逻辑功能上的特点是任意时刻的输出仅仅取决于该时刻的输入&#xff0c;与电路原来的状态无 关。而时序逻辑从电路特征上看来&#xff0c;其特点为任意时刻的输出不仅取决于该…

全网人气排行第一的免费开源ERP:Odoo电商功能应用亮点介绍

Odoo E-Commerce是一款创新型电子商务管理系统&#xff0c;旨在帮助企业建立以客户为中心的B2B与B2C电子商务平台&#xff0c;提高电商业务敏捷性&#xff0c;保障利润&#xff0c;并确保客户体验战略与时俱进。 —— 开源智造Odoo老杨 什么是Odoo免费开源电商管理系统&#xf…

Vue3引入高德地图js API 2.0

文章目录 前言一、地图加载1.本文准备环境2.引入库3.加载地图4.加载地图控件 二、POI搜索1.什么是poi搜索2.如何使用 三、绘制点标记与信息窗体1.场景描述2.案例3.信息窗体-链接路由跳转4.进阶-通过Marker自动触发标记点&#xff08;非鼠标手动点击&#xff09; 四、jsApi地图事…

文献速递:深度学习胶质瘤诊断---空间细胞结构预测胶质母细胞瘤的预后

Title 题目 Spatial cellular architecture predicts prognosis in glioblastoma 空间细胞结构预测胶质母细胞瘤的预后 01文献速递介绍 胶质母细胞瘤的治疗耐药性的关键驱动因素是肿瘤内的异质性和细胞状态的可塑性。在这里&#xff0c;我们调查了空间细胞组织与胶质母细胞瘤…

聚道云一键打通金蝶宁波银行,财务效率暴涨10倍!

客户介绍&#xff1a; 某农资有限公司是一家集农资贸易、仓储物流、农机服务为一体的大型企业。随着业务规模的不断扩大&#xff0c;传统的手动财务操作模式已难以满足其需求。公司急需寻找一种方法&#xff0c;将金蝶财务软件与宁波银行对接&#xff0c;实现资金流转自动化和…

深入解析YOLOv2

深入解析YOLOv2 引言 目标检测是计算机视觉中的一个核心问题&#xff0c;它旨在识别图像中所有感兴趣的目标&#xff0c;并给出它们的类别和位置。近年来&#xff0c;随着深度学习技术的发展&#xff0c;目标检测领域取得了巨大的进步。YOLO&#xff08;You Only Look Once&a…

Ozone V3.32a Jlink显示变量波形

目录 前言 Ozone 配合Jlink显示变量波形 导出数组查看高频变量波形 总结 前言 Ozone V3.32a使用总结-CSDN博客 前面介绍了Ozone的安装和使用&#xff0c;因为调试需要&#xff0c;要看一些数据的波形。这里总结两种用Ozone查看变量波形的方法。 Ozone 配合Jlink显示变量波…

CCF-A类!狂涨6.131分,中科院2区,无版面费的王者刊物!

计算机领域 顶级好刊解析 今天解析的是一本Springer期刊&#xff0c;2022JCR发布后影响因子由13.369涨至19.5&#xff0c;年底升区可能性很大&#xff0c;究竟期刊实力如何呢&#xff1f;详情请看下文&#xff1a; 01 期刊简介 International Journal of Computer Vision ✅…

JSON Web Token 入门

JSON Web Token&#xff08;缩写 JWT&#xff09;是目前最流行的跨域认证解决方案&#xff0c;本文介绍它的原理和用法。 一、跨域认证的问题 互联网服务离不开用户认证。一般流程是下面这样。 1、用户向服务器发送用户名和密码。 2、服务器验证通过后&#xff0c;在当前对话&…

Linux安装部署Tomcat

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Linux安装部署Tomcat //将tomcat压缩包解压到对…