【热】如何实现el-table列宽随内容长度自适应最小宽度

news2024/12/25 8:52:02

非常火急火燎的来写这篇博客!!因为自己一开始想实现这个效果时在网上查了很久查了很多资料和博客都没有找到能有效达到效果的方法,要么就是别人说有效但是我这里会报错而且难以解决。最后终于被我自己给摸索出来了!

应用场景

很多时候,在做表格时,我们希望列项的宽度随着内容宽度自适应调整,而不希望换行。

但在数据导入前,我们不知道内容宽度是多少,所以没办法直接设置确定的min-width去保证内容不换行。比如这样(这只是个我随便写的表格例子,不用太纠结于数据):

 我需要达到的效果是,列宽根据我内容项里最长的一项调整长度实现下面这样子的效果:


我们的思路是

  • 动态计算每列的宽度:遍历数据数组,获取每单元格内容的宽度,并加上列内边距,然后取最大宽度作为列宽。
  • 动态创建一个<span>标签,将其设置为不可见、绝对定位并放置在屏幕外,以便获取文本的实际宽度。然后将文本内容赋值给<span>,将其添加到页面上,获取其宽度后再移除。

通过以上方法,就可以实现 el-table 列宽随内容长度自适应最小宽度的效果。

根据这个思路,实现一个方法getColunmnWidth供表格列项使用。

  function getColumnWidth(prop) {
    const minWidth = 80; // 最小宽度
    const padding = 16; // 列内边距

    const contentWidths = assessments.map((item) => {
      const value = item[prop] ? String(item[prop]) : "";
      const textWidth = getTextWidth(value);
      return textWidth + padding;
    });

    const maxWidth = Math.max(...contentWidths);

    return Math.max(minWidth, maxWidth);
  }
  function getTextWidth(text) {
    const span = document.createElement("span");
    span.style.visibility = "hidden";
    span.style.position = "absolute";
    span.style.top = "-9999px";
    span.style.whiteSpace = "nowrap";
    span.innerText = text;
    document.body.appendChild(span);
    const width = span.offsetWidth + 5;
    document.body.removeChild(span);
    return width;
  }

 在列表代码中,直接传入参数名称,调用方法即可

<el-table-column
    prop="name"
    label="姓名"
    :min-width="getColumnWidth('name')"
/>

亲测有效!!!

然后呢,大家可以像我一样把这个方法进行封装供多个项目/多个页面的表格使用。

完整代码和封装代码我就不发出来了,希望大家可以看懂了之后自己实现出来,拒绝直接复制粘贴!

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

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

相关文章

AI+无代码助力企业供应链优化

内容来自演讲&#xff1a;潘峰 | 预见明日科技&#xff08;北京&#xff09;有限公司 | CEO 摘要 本文介绍了企业供应链中的挑战和解决方案。文章指出&#xff0c;供应链成本占企业经营成本的大部分&#xff0c;且存在供给端和需求端的高度不确定性。为应对这种不确定性&…

Openwrt源码下载出现“The remote end hung up unexpected”

最近项目原因需要下载openwrt21.02版本源码&#xff0c;花费了很多时间&#xff0c;找到正确方法后&#xff0c;发现可以节省很多时间&#xff0c;记录下过程&#xff0c;方便自己&#xff0c;可能方便他人。 一.问题阐述 openwrt21.02下载链接如下&#xff1a; git clone -…

Uncaught ReferenceError: jQuery is not defined解决方法

当我在写java的Maven项目时&#xff0c;出现了这样的一个报错信息&#xff1a; 我一直找代码&#xff0c;抓包&#xff0c;调试&#xff0c;比对代码 jQuery未定义就是指JS的导包没有导进来&#xff01;&#xff01;&#xff01;&#xff01; 导进来就运行正常啦

12.字符串拼接【2023.12.4】

1.问题描述 我们在编程过程中经常会遇到把不同字符串拼接在一起的情况&#xff0c;从而更直观地展示给用户我们所要表达的信息。本题将给出两个字符串&#xff0c;请依次将这两个字符串拼接在一起。 2.解决思路 用字符串拼接符 进行连接两个字符串 3.代码实现 str1input(…

SpringBoot中MyBatis-Flex的集成和使用

一、MyBatis-Flex 是什么​ MyBatis-Flex是一个基于MyBatis的数据访问框架&#xff0c;专门为Flex应用程序而设计的。它提供了一种灵活而高效的方式来处理Flex应用程序中的数据访问&#xff0c;可以轻松地连接到各种数据源&#xff0c;并提供了一些方便的工具和功能&#xff0c…

2023.12.6-12.11 黑马知行教育项目实战,访问咨询意向线索主题

目录 简单介绍: 一.项目背景介绍 二.项目架构介绍 三.项目内容 3.1访问和咨询分析主题: 3.1.1 表与表之间的关联 3.1.2访问咨询主题需求汇总:最终需在ADS层制作六张表 3.1.3 访问咨询DWS大宽表建表与导入数据 3.2意向线索主题需求分析 3.2.1意向线索主题需求汇总:最终需在…

最新科研成果:在钻石中存储多比特数据,实现25GB数据密度

近日&#xff0c;纽约城市大学&#xff08;CUNY&#xff09;的研究人员已经成功地利用钻石原子结构中的小型氮缺陷作为“颜色中心”来写入数据进行存储&#xff08;然后是检索&#xff09;。这项发表在《自然纳米技术》上的技术允许通过将数据编码为多个光频率&#xff08;即颜…

[GFCTF 2021]文件查看器

文章目录 前置知识可调用对象数组对方法的调用GC回收机制phar修改签名 解题步骤 前置知识 可调用对象数组对方法的调用 我们先来看下面源码 <?phperror_reporting(0);class User{public $username;public $password;public function check(){if($this->username"…

架构LAMP

目录 1.什么是LAMP 2.LAMP组成及作用 3.搭建Apache httpd服务 4.编译安装mysqld 服务 5.编译安装PHP 解析环境 6.安装论坛 1.什么是LAMP LAMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务…

Threejs项目实战之一:汽车外观换肤效果三维展示

目录 最终效果1 创建项目2 安装插件3 编写代码3.1 准备工作3.2 代码编写3.2.1 在template标签中构建html页面3.2.2 在style标签中构建页面样式文件3.2.3 在script标签中编写js代码 最终效果 先看下最终实现的效果 接下来&#xff0c;我们就从创建项目开始&#xff0c;一步一步…

三天精通Selenium Web 自动化 - 测试框架(一)

1 框架结构雏形 返回 新建的一个java project&#xff0c;项目名为autotest,创建如下结构 图1 框架结构雏形 base&#xff1a;里面有个基类 &#xff08;BaseParpare.java&#xff09;&#xff0c;这个类的主要作用是启动&#xff08;启动浏览器使用了TetsNG的BeforeClass&am…

P4 Qt基础控件——工具按钮toolButton(上)

前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《Linux C应用编程&#xff08;概念类&#xff09;_ChenPi的博客-CSDN博客》✨✨✨ &#x1f33a;本篇简介 &#xff1a;这一章我们学一…

披荆斩棘的「矿区无人驾驶」,能否真正打开千亿级市场?

随着2022年备受瞩目的台泥句容矿无人驾驶运输项目硬核落地&#xff0c;以及相关科技公司开放该矿24小时无人矿卡生产运营直播以证明其项目并非在演示&#xff0c;2023年全国开启了大规模矿区无人驾驶商业化落地&#xff0c;堪称矿区无人驾驶元年。虽然我国矿区无人驾驶市场渗透…

【C语言】数据结构——小堆实例探究

&#x1f497;个人主页&#x1f497; ⭐个人专栏——数据结构学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 导读&#xff1a; 我们在前面学习了单链表和顺序表&#xff0c;以及栈和队列。 今天我们来学习小堆。 关注博主或是订阅专栏&a…

ArkUI组件

目录 一、概述 声明式UI 应用模型 二、常用组件 1、Image&#xff1a;图片展示组件 示例 配置控制授权申请 2、Text&#xff1a;文本显示组件 示例 3、TextInput&#xff1a;文本输入组件 示例 4、Button&#xff1a;按钮组件 5、Slider&#xff1a;滑动条组件 …

【日志技术】附Logback入门教程

文章目录 日志概论日志的体系Logback快速入门日志配置文件配置日志级别 日志概论 什么是日志&#xff1f;其实可以通过下面几个问题来了解的。 系统系统能记住某些数据被谁操作&#xff0c;比如被谁删除了&#xff1f;想分析用户浏览系统的具体情况&#xff0c;比如挖掘用户的…

常州经开区大学生音乐节——常州首届校园乐队比赛

2023年12月9日下午&#xff0c;由江苏省文化馆指导、常州经开区社会事业局主办、常州柒号文化传播有限公司承办、百吉琴行协办的青春制“燥”大学生音乐节——常州首届校园乐队比赛&#xff0c;在常州经开区文化活动中心顺利举办。 常州经开区社会事业局副局长 方姣 为本次比赛…

CPU、内存与硬盘及IO操作

目录 1、概念简介 1.1 CPU&#xff08;Central Processing Unit&#xff0c;中央处理器&#xff09; 1.2 硬盘&#xff08;Hard Disk Drive&#xff09; 1.3 内存&#xff08;Memory&#xff09; 2、计算机程序在进行io读写操作时&#xff0c;这三者的功能和实现原理 1、概…

使用Gson完成java对象的序列化和反序列化

一、前言&#xff1a;json是什么&#xff1f;&#xff0c;Gson是什么&#xff1f; 1.JSON&#xff08;javaScript Object Notation&#xff09; 是一种轻量级的数据交换格式。易于人阅读和编写&#xff0c;同时也易于机器解析和生成。 2.Gson 是Google提供的用来在java对象…

手持式心电图机|12道便携式心电图机主板方案定制

心电图机被广泛应用于心脏状况的监测&#xff0c;可以从多个角度观察心脏情况&#xff0c;及时反映患者的病情&#xff0c;以便医生和患者了解。触摸屏使得控制和信息录入变得轻松。心电图报告提供多种语言选择&#xff0c;便于上传信息&#xff0c;实现无纸化报告。同时&#…