解决表格出现滚动条样式错乱问题

自定义表格出现滚动条时,会因为宽度不对等导致样式错乱;
在这里插入图片描述
解决思路:
监听表格数据的变化,当表格出现滚动条时,再调用更新宽度的方法updateWidth,去改变表格头部的宽度,最终保持表格头部和内容对齐。
一、监听数据变化并更新宽度
在这里插入图片描述
二、给dom元素设置ref属性,方便后续获取宽度
在这里插入图片描述

updateWidth() {this.$nextTick(() => {if (this.$refs.otherColBodyBoxRef) {const newWidth = this.$refs.otherColBodyBoxRef.clientWidth;const progressContentRefWidth =this.$refs.progressContentRef.clientWidth;if (progressContentRefWidth - newWidth > 101) {// 滚动条this.customHeaderWidth = "calc(100% - 6px)";} else {this.customHeaderWidth = "100%";}}});},//progressContentRef是最外层大盒子的宽度

最终效果如下:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

天才的懈怠 : 平衡二叉树

力扣110:平衡二叉树 描述: 二叉树的每一个节点的左右子树高度差不超过1,即为平衡二叉树 递归 树:还是用递归,从最深的节点开始向上判断,保证每个节点的左右子树高度差不大于1,大于1的用 -1 做标…

使用@react-three/fiber,@mkkellogg/gaussian-splats-3d加载.splat,.ply,.ksplat文件

前言 假设您正在现有项目中集成这些包,而该项目的构建工具为 Webpack 或 Vite。同时,您对 Three.js 和 React 有一定的了解。如果您发现有任何错误或有更好的方法,请随时留言。 安装 npm install three types/three react-three/fiber rea…

MySQL:CRUD

MySQL表的增删改查(操作的是表中的记录) CRUD(增删改查) C-Create新增R-Retrieve检查,查询U-Update更新D-Delete删除 新增(Create) 语法: 单行数据全列插入 insert into 表名[字段一,字段…

DeBiFormer实战:使用DeBiFormer实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度,DP多卡,EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

小面馆叫号取餐流程 佳易王面馆米线店点餐叫号管理系统操作教程

一、概述 【软件资源文件下载在文章最后】 小面馆叫号取餐流程 佳易王面馆米线店点餐叫号管理系统操作教程 点餐软件以其实用的功能和简便的操作,为小型餐饮店提供了高效的点餐管理解决方案,提高了工作效率和服务质量 ‌点餐管理‌:支持电…

5G时代的关键元件:射频微波MLCCs市场前景广阔

根据QYResearch调研团队最新发布的《全球射频微波多层陶瓷电容器市场报告2023-2029》显示,预计到2029年,全球射频微波多层陶瓷电容器市场规模将攀升至12.4亿美元,其未来几年内的年复合增长率(CAGR)预计为5.1%。 以下图…

ElasticSearch学习笔记一:简单使用

一、前言 该系列的文章用于记录本人从0学习ES的过程,首先会对基本的使用进行讲解。本文默认已经安装了ES单机版本(当然后续也会有对应的笔记),且对ES已经有了相对的了解,闲话少叙,书开正文。 二、ES简介 …

FFmpeg 4.3 音视频-多路H265监控录放C++开发十三:将AVFrame转换成AVPacket。视频编码原理.编码相关api

前提: 从前面的学习我们知道 AVFrame中是最原始的 视频数据,这一节开始我们需要将这个最原始的视频数据 压缩成 AVPacket数据, 我们前面,将YUV数据或者 RGBA 数据装进入了 AVFrame里面,并且在SDL中显示。 也就是说&…

ODOO学习笔记(8):模块化架构的优势

灵活性与可定制性 业务流程适配:企业的业务流程往往因行业、规模和管理方式等因素而各不相同。Odoo的模块化架构允许企业根据自身的具体业务流程,选择和组合不同的模块。例如,一家制造企业可以启用采购、库存、生产和销售模块,并通…

28.医院管理系统(基于springboot和vue)

目录 1.系统的受众说明 2. 相关技术和开发环境 2.1 相关技术 2.1.1 Java语言 2.1.2 HTML、CSS、JavaScript 2.1.3 Redis 2.1.4 MySQL 2.1.5 SSM框架 2.1.6 Vue.js 2.1.7 SpringBoot 2.2 开发环境 3. 系统分析 3.1 可行性分析 3.1.1 经济可行性 3.1.2 技术…

实时渲染技术如何助力3D虚拟展厅?

实时渲染技术以其强大的图形处理能力和即时反馈特性,在虚拟展厅的创建和体验中发挥着举足轻重的作用。视创云展3D虚拟展厅提供全方位的VR漫游体验,实时渲染技术确保场景细腻逼真,让访客仿佛置身其中,享受沉浸式的视听享受。以下是…

金价大跌,特朗普胜选或成导火索

黄金光芒不再,美元强势崛起 上周特朗普赢得美国总统选举后,金价出现了大幅下跌。这标志着市场情绪正在发生转变,投资者开始从避险资产转向风险资产。 为何金价会下跌? 美元走强: 特朗普的胜选提振了美元,…

springboot项目中,使用ProGuard 对代码进行混淆

springboot项目中&#xff0c;使用ProGuard 对代码进行混淆 使用maven作为构建工具 &#xff0c; 在build中添加如下内容 <build><resources><resource><directory>src/main/java</directory><includes><include>**/*.xml</inclu…

[CKS] 关闭API凭据自动挂载

目前的所有题目为2024年10月后更新的最新题库&#xff0c;考试的k8s版本为1.31.1 BackGround 安全审计发现某个Deployment有不合规的服务账号令牌&#xff0c;这可能导致安全漏洞。 Task 首先&#xff0c;修改monitoring namespace中现有的stats-monitor-sa ServiceAccount&…

zabbix监控端界面时间与服务器时间不对应

1. 修改系统时间 # tzselect Please select a continent, ocean, "coord", or "TZ".1) Africa2) Americas3) Antarctica4) Asia5) Atlantic Ocean6) Australia7) Europe8) Indian Ocean9) Pacific Ocean 10) coord - I want to use geographical coordina…

Gsensor加速度传感器数据异常及概率性卡死

关注 点赞 收藏 不错过精彩内容 大家好&#xff0c;我是硬核王同学 今天给大家分享下&#xff0c;经过三个多月解决的Gsensor加速度传感器数据异常及概率性卡死的问题。 数据异常 故事的开始是来自一位客户的投诉&#xff0c;说机器放在桌面上不去动它&#xff0c;语音就会播…

【CSS】“flex: 1“有什么用?

flex 属性的组成 flex 属性是一个复合属性&#xff0c;包含以下三个子属性&#xff1a; flex-grow&#xff1a;决定元素在容器中剩余空间的分配比例。默认值为 0&#xff0c;表示元素不会扩展。当设置为正数时&#xff0c;元素会按照设定比例扩展。flex-shrink&#xff1a;决…

【STM32】基于SPI协议读写SD,详解!

文章目录 0 前言1 SD卡的种类和简介1.1 SD卡的种类1.2 SD卡的整体结构1.3 SD卡运行机制——指令和响应2 SD卡的通信总线2.1 SDIO2.2 SPI3 硬件连接4 代码实践【重点】4.1 HAL库移植4.2 标准库移植4.3 遇到的问题和解决方案5 扩展阅读0 前言 因为项目需要,使用stm32读写sd卡,这…

软件测试面试题(800道)【附带答案】持续更新...

&#xff08;2024版&#xff09;面经 详细笔记部分展示&#xff1a; 测试基础&#xff08;102页&#xff09; Linux基础&#xff08;38页&#xff09; MySQL&#xff08;63页&#xff09; web测试&#xff08;21页&#xff09; API测试&#xff08;46页&#xff09; APP测试&…

带你掌握springboot集成SpringSecurity安全框架

前言&#xff1a; Spring Security 是 Spring 家族中的一个框架&#xff0c;提供了一套 Web 应用安全性的完整解决方案。一般来说&#xff0c;系统的安全性包括用户认证&#xff08;Authentication&#xff09;和用户授权&#xff08;Authorization&#xff09;两个部分。 认证…