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

【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用

在这里插入图片描述
效果图
在这里插入图片描述
权限a用户所看到的页面
权限b用户所看到的页面
权限c用户所看到的页面
以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题.

目录

  • 解决方法
  • 解决过程中可能出现的问题
    • width赋值时为什么不放update()中
    • btnDom为什么不能直接调用forEach
    • 为什么width += paddingSpacing * btnCount * 2 + 1最后要加1
    • 获取按钮最大数量为什么是找类名为'el-button--small'而不是'el-button'
  • 方法封装全局使用
    • 1, 新建formatBtnWidth.js
    • 2, 挂载到main.js
    • 3,页面内使用
  • 测试demo
  • 暂未解决的问题
    • 首次进入页面, 表格会抖动一下

解决方法

1, 获取操作栏按钮容器, 拿到所有按钮的list
2, 遍历按钮, 获取某条数据中按钮list最大宽度
3, 返回所有按钮宽度+间隙宽度

...<el-table-column label="操作" :width="formatBtnWidth">//<template slot-scope="{ row }"><div class="btnList">//<el-button @click="openDialog(1, row)" type="primary" size="small" icon="el-icon-edit-outline">编 辑</el-button>//<el-button.........</div>// </template></el-table-column>
...
data(){return{formatBtnWidth: 120, // 也可以填0, 120是默认一个按钮的宽度}
}
....
methods: {// 查询表格数据search(xxx,xxx){....xxx().then(res=>{//this.tableData = res.data // 表格赋值this.$nextTick(() => {this.formatBtnWidth = this.getFormatBtnWidth()})})}// 自适应计算操作栏宽度getFormatBtnWidth(){let width = 120 // 默认宽度let paddingSpacing = 5 // 默认边距let btnCount = 0 // 按钮数量let btnDom = document.getElementsByClassName('btnList') // 获取操作栏按钮容器if (btnDom.length) {// [...btnDom]转数组var btnDomArray = [...btnDom]btnDomArray.forEach((v) => {// 最大宽度if (width < v.offsetWidth) width = v.offsetWidth// 最大按钮数量const buttons = v.getElementsByClassName('el-button--small').lengthif (btnCount < buttons) btnCount = buttons})// 如果按钮数量大于2,宽度要加上边距if (btnCount > 1) {width += paddingSpacing * btnCount * 2 + 1}}return width}
}
....btnList {white-space: nowrap;display: inline-block;
}

解决过程中可能出现的问题

width赋值时为什么不放update()中

我感觉放表格赋值之后也可以, 因为如果你放update()里面调用, 无聊你在页面操作什么, 比如点击一下模态框之类的和表格无关的事情, 这个方法都会被执行, 感觉有点浪费, 所以放在了赋值之后, 当然, 这都是我的个人猜想.

btnDom为什么不能直接调用forEach

可以自己试一下, 调了会报错
打印btnDom出来看看
在这里插入图片描述
可以看到他是HTMLCollection格式的数组, 不清楚这是什么格式的, 百度一下看看, 解释如下:
在这里插入图片描述

解决方法如下:

第一种, 不转数组,不用forEach, 直接改为用for循环
for (let i = 0; i < btnDom.length; i++) {}第二种, 使用es6方法转成数组后再使用forEach, 三种任选其一都可以
var btnDomArray = Array.prototype.slice.call(btnDom)
var btnDomArray = Array.from(btnDom)
var btnDomArray = [...btnDom]

为什么width += paddingSpacing * btnCount * 2 + 1最后要加1

加1是为了部分情况下, 按钮宽度计算不准确导致操作栏出现省略号…的问题. 看如下情况:
在这里插入图片描述
①是鼠标移到按钮容器中可以看到显示的宽度是193.34px
②是控制台打印的按钮容器宽度是193px, 与①相差了一点点, 但就是这一点点像素导致操作栏总宽度超出设定的宽度,从而出现③省略号…的问题
所以在width += paddingSpacing * btnCount * 2 + 1 多加1px,就不会出现省略号了.可能有更好的方法 ,但我目前只能想到这种方法.

获取按钮最大数量为什么是找类名为’el-button–small’而不是’el-button’

因为类名为el-button的按钮会夹杂其他的按钮,比如下图:
操作栏的删除按钮中还有一个模态框, 里面有两个按钮, 如果用el-button,会把这里面的按钮也算作操作栏按钮中, 实际上是不需要计算的
在这里插入图片描述
因为外层的三个按钮都有el-buttn-small类名,而且小弹窗中的按钮没有这个类名, 所以就可以 以el-buttn-small来区分是否为操作栏的按钮了
如果小弹窗中的按钮也有el-buttn-small怎么办, 那就只能在按钮中再加一个自定义的类名了,获取按钮最大数量就用自定义的类名.

方法封装全局使用

1, 新建formatBtnWidth.js

// 格式化操作栏按钮宽度
export function formatBtnWidth() {let width = 120 // 默认宽度let paddingSpacing = 5 // 默认边距let btnCount = 0 // 按钮数量let btnDom = document.getElementsByClassName('btnList') // 获取操作栏按钮容器if (btnDom.length) {// [...btnDom]转数组var btnDomArray = [...btnDom]btnDomArray.forEach((v) => {// 最大宽度if (width < v.offsetWidth) width = v.offsetWidth// 按钮数量const buttons = v.getElementsByClassName('el-button--small').lengthif (btnCount < buttons) btnCount = buttons})// 如果按钮数量大于2,宽度要加上边距if (btnCount > 1) {width += paddingSpacing * btnCount * 2 + 1}}return width
}

2, 挂载到main.js

import { formatBtnWidth } from '@/util/formatBtnWidth'
Vue.prototype.$formatBtnWidth = formatBtnWidth

3,页面内使用

methods: {// 查询表格数据search(xxx,xxx){....xxx().then(res=>{//this.tableData = res.data // 表格赋值this.$nextTick(() => {this.formatBtnWidth = this.$formatBtnWidth()})})}
}

测试demo

测试demo已上传,点击前往下载

暂未解决的问题

首次进入页面, 表格会抖动一下

这就formatBtnWidth的初始值问题了,
默认填一个按钮的宽度(120px), 如果表格恰好是一个按钮, 就不会抖动,
如果表格是多个按钮,就会抖动一下
如果默认填0, 无论几个按钮都会抖动
所以我就不知道该怎么搞了, 有知道的大佬可以发表一下意见, 不过我感觉这也不算什么大问题哈.

相关文章:

【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用

效果图 以上图片分别代表不同用户权限下所能看到的按钮个数, 操作列宽度也会自适应宽度, 就不会一直处于最大宽度, 导致其他权限用户看到的页面出现大量留白问题. 目录 解决方法解决过程中可能出现的问题width赋值时为什么不放update()中btnDom为什么不能直接调用forEach为…...

OpenAI发布全新o1 AI模型具备推理能力

&#x1f989; AI新闻 &#x1f680; OpenAI发布全新o1 AI模型具备推理能力 摘要&#xff1a;OpenAI推出新AI模型o1&#xff0c;具备推理能力&#xff0c;旨在比人类更快地解决复杂问题。o1与o1-mini版本同时发布&#xff0c;前者训练成本较高&#xff0c;但在编程和多步骤问…...

如何在本地部署大语言模型

近年来&#xff0c;随着大语言模型&#xff08;如GPT、BERT等&#xff09;的迅速发展&#xff0c;越来越多的开发者和研究人员希望在本地环境中部署这些强大的模型&#xff0c;以便用于特定的应用场景或进行个性化的研究。本文将详细介绍如何在本地部署大语言模型&#xff0c;涵…...

秒懂:环境变量

前言 1.Linux当中70%以上的命令程序都是用C语言写的 2.执行命令程序和运行自己写的程序没有任何区别 3.自己程序运行必须要带路径&#xff08;绝对/相对都可&#xff09; 4. 系统指令可带可不带&#xff08;带不要瞎带&#xff09; 变量具有全局特性是…...

使用 @Param 注解标注映射关系

目录 1. 场景描述 2. SQL语句 3. 方法定义 4. Param注解的使用 5. 总结 在开发过程中&#xff0c;我们经常需要在Java应用程序中执行数据库操作&#xff0c;尤其是更新操作。在Spring Data JPA框架中&#xff0c;我们可以使用原生SQL语句来执行这些操作&#xff0c;并通过…...

Java学习中在打印对象时忘记调用 .toString() 方法或者没有重写 toString() 方法怎么办?

在 Java 编程中&#xff0c;toString() 方法对于调试、日志记录以及打印对象信息至关重要。然而&#xff0c;许多初学者在打印对象时可能会忘记调用 .toString() 方法&#xff0c;或者在自定义类中没有重写 toString() 方法&#xff0c;这可能导致输出结果不符合预期。 一、Ja…...

如何评估一个RAG(检索增强生成)系统-上篇

最近项目中需要评估业务部门搭建的RAG助手的效果好坏&#xff0c;看了一下目前业界一些评测的方法。目前分为两大类&#xff0c;基于传统的规则、机器学习的评测方法&#xff0c;基于大模型的评测方法。在这里做一些记录&#xff0c;上篇主要做评测方法的记录&#xff0c;下篇会…...

rust解说

Rust 是一种开源的系统编程语言&#xff0c;由 Mozilla 研究院开发&#xff0c;旨在提供高性能、内存安全且并发性良好的编程体验。 Rust 于 2010 年由 Graydon Hoare 开始设计&#xff0c;并在 2015 年发布了第一个稳定版本。 Rust 的设计目标是解决 C 等传统系统编程语言在…...

Elasticsearch 开放 inference API 为 Hugging Face 添加了原生分块支持

作者&#xff1a;来自 Elastic Max Hniebergall 借助 Elasticsearch 开放推理 API&#xff0c;你可以使用 Hugging Face 的推理端点&#xff08;Inference Endpoints&#xff09;在 Elasticsearch 之外执行推理。这样你就可以使用 Hugging Face 的可扩展基础架构&#xff0c;包…...

Jenkins部署若依项目

一、配置环境 机器 jenkins机器 用途&#xff1a;自动化部署前端后端&#xff0c;前后端自动化构建需要配置发送SSH的秘钥和公钥&#xff0c;同时jenkins要有nodejs工具来进行前端打包&#xff0c;maven工具进行后端的打包。 gitlab机器 用途&#xff1a;远程代码仓库拉取和…...

ELK笔记

要搞成这样就需要钱来买服务器 开发人员一般不会给服务器权限&#xff0c;不能到服务器上直接看日志&#xff0c;所以通过ELK看日志。不让开发登录服务器。即使你查出来是开发的问题&#xff0c;费时间&#xff0c;而且影响了业务了&#xff0c;就是运维的问题 开发也不能登录…...

计算机网络 --- 计算机网络的分类

一、计算机网络分类 1.1 按分布范围分类 举例&#xff1a;广域网&#xff08;WAN&#xff09;、局域网&#xff08;LAN&#xff09; 举例&#xff1a;个域网&#xff08;PAN&#xff09; 1.2 按传输技术分类 广播式网络――当一台计算机发送数据分组时&#xff0c;广播范围…...

三维动画|创意无限,让品牌传播更精彩!

随着三维动画技术的不断成熟&#xff0c;三维动画宣传片能够很好地宣传品牌、推广产品&#xff0c;因而慢慢地受到不少企业的青睐&#xff0c;成为品牌最常用的一种宣传方式。 三维动画宣传片作为艺术感极高的宣传视频有强烈的节奏感&#xff0c;而且具有风趣、易懂等特点&…...

欧零导航系统正式版,功能强大,可直接运营

欧零导航系统正式版&#xff0c;带广告位/导航分类/可直接运营 本系统采用PHPMySQL技术开发 拥有独立的安装和后台系统 后台采用BootstripMDUI框架 前台使用响应式界面&#xff0c;自适应各种屏幕 代码免费下载&#xff1a;百度网盘...

了解变压器耦合电压开关 D类放大器

在本文中&#xff0c;我们将讨论另一种 D 类配置&#xff1a;变压器耦合电压切换 (TCVS) 放大器。TCVS 放大器的原理图如图 1 所示。 变压器耦合电压开关 D 类放大器的示意图。 图 1.变压器耦合电压开关 D 类放大器。 在本文中&#xff0c;我们将探索该放大器的工作原理&…...

openssh移植:精致的脚本版

前置文章&#xff1a; busybox移植&#xff1a;全能脚本版-CSDN博客 zlib交叉编译-CSDN博客 openssl移植:精致的脚本版-CSDN博客 源码下载 官网&#xff1a;http://www.openssh.com/ 下载了一个很新的版本 ftp://mirrors.sonic.net/pub/OpenBSD/OpenSSH/portable/openss…...

3C电子胶黏剂在手机制造方面有哪些关键的应用

3C电子胶黏剂在手机制造方面有哪些关键的应用 3C电子胶黏剂在手机制造中扮演着至关重要的角色&#xff0c;其应用广泛且细致&#xff0c;覆盖了手机内部组件的多个层面&#xff0c;确保了设备的可靠性和性能。以下是电子胶在手机制造中的关键应用&#xff1a; 手机主板用胶&…...

Oracle数据库中的动态SQL(Dynamic SQL)

Oracle数据库中的动态SQL是一种在运行时构建和执行SQL语句的技术。与传统的静态SQL&#xff08;在编写程序时SQL语句就已经确定&#xff09;不同&#xff0c;动态SQL允许开发者在程序执行过程中根据不同的条件或用户输入来构建SQL语句。这使得动态SQL在处理复杂查询、存储过程中…...

Python判断两张图片的相似度

在Python中&#xff0c;判断两张以numpy的ndarray格式存储的图片的相似度&#xff0c;通常可以通过多种方法来实现&#xff0c;包括但不限于直方图比较、像素差比较、结构相似性指数&#xff08;SSIM&#xff09;、特征匹配等。以下是一些常见方法的简要介绍和示例代码。 1. 像…...

MySQL高级功能-窗口函数

背景 最近遇到需求&#xff0c;需要对数据进行分组排序并获取每组数据的前三名。 一般涉及到分组&#xff0c;第一时间就是想到使用group by对数据进行分组&#xff0c;但这样分组&#xff0c;到最后其实只能获取到每组数据中的一条记录。 在需要获取每组里面的多条记录的时候…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...