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

embedded/2024/11/15 3:50:00/

自定义表格出现滚动条时,会因为宽度不对等导致样式错乱;
在这里插入图片描述
解决思路:
监听表格数据的变化,当表格出现滚动条时,再调用更新宽度的方法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.ppmy.cn/embedded/137336.html

相关文章

方法论-2W1H提问法

概述 2W1H(What, Why, How)提问法是一种简洁而高效的分析工具,通过明确回答三个核心问题:“What(是什么)”、“Why(为什么)”和“How(如何做)”,…

C++写一个Date日期类

一个日期类作为类和对象知识点的总结 注意: 因为历史上1582年10月是少了10天,并且闰年的计算规则在1582年前后是不同的,因此计算某一天是周几,直接采用了倒推的方式确定公元1年1月1日是周几,然后反过来写的。&#xff…

Python操作系统交互:subprocess库的基本应用

Python 操作系统交互:subprocess 库的基本应用 在日常的 Python 编程中,操作系统交互是一个常见的需求。无论是调用外部命令、与操作系统进程进行交互,还是在 Python 中运行脚本,subprocess 庋是一个强大的工具。它为 Python 提供…

信息安全建设方案,网络安全等保测评方案,等保技术解决方案,等保总体实施方案(Word原件)

1 概述 1.1 项目简介 1.2 测评依据 2 被测信息系统情况 2.1 定级情况 2.2 承载的业务情况 2.3 网络结构 2.4 被测对象资产 2.5 上次测评问题整改情况说明 3 测评范围与方法 3.1 测评指标 3.1.1 安全通用要求指标 3.1.2 安全扩展要求指标 3.1.3 其他安全要求指标 3.1.4 不适用安…

【LeetCode】【算法】22. 括号生成

LeetCode 22. 括号生成 题目描述 数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且 有效的 括号组合。 解题思路 天天到处看答案,看的灵神的解题思路回溯不会写?套路在此!(Pyth…

实现扫码挪车,微信通知、打电话(内有免费部署静态网站+免费域名的方法)

先上静态网页界面&#xff0c;有需要的自取&#xff0c;随便改改样式即可。 htmlcssjs <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, ini…

JS爬虫实战之TikTok_Shop验证码

TikTok_Shop验证码逆向 逆向前准备思路1- 确认接口2- 参数确认3- 获取轨迹参数4- 构建请求5- 结果展示 结语 逆向前准备 首先我们得有TK Shop账号&#xff0c;否则是无法抓取到数据的。拥有账号后&#xff0c;我们直接进入登录。 TikTok Shop 登录页面 思路 逆向步骤一般分为…

Java集合基础——针对实习面试

目录 Java集合基础什么是Java集合&#xff1f;说说List,Set,Queue,Map的区别&#xff1f;说说List?说说Set?说说Map&#xff1f;说说Queue?为什么要用集合&#xff1f;如何选用集合&#xff1f; Java集合基础 什么是Java集合&#xff1f; Java集合&#xff08;Java Collect…