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

element Plus中 el-table表头宽度自适应,不换行

在工作中,使用el-table表格进行开发后,遇到了小屏幕显示器上显示表头文字会出现换行展示,比较影响美观,因此需要让表头的宽度变为不换行,且由内容自动撑开。

以下是作为工作记录,用于demo演示教程

先贴个需要优化的代码

<template><div style="width: 100%;height: 100%;overflow: hidden;"><el-table :data="tableData" ><el-table-column prop="date" label="info_Date"/><el-table-column prop="name" label="info_Name"/><el-table-column prop="age" label="info_Age"/><el-table-column prop="gender" label="info_Gender"/><el-table-column prop="type" label="info_Type"/><el-table-column prop="address" label="info_Address" /></el-table></div>
</template><script lang="ts" setup>
const tableData = [{date: '05-03',name: '张三',age:18,gender:'男',type:'高中生',address: 'No. 189, Grove St, Los Angeles',},{date: '05-02',name: '李四',age:19,gender:'女',type:'大学生',address: 'No. 189, Grove St, Los Angeles',}
]
</script>

在页面中的效果是,表头出现了换行的情况

根据官网提示 列标题 Label 区域渲染使用的 Function  =>   render-header,于是就使用这个方法对表头等宽度进行计算

<template><div style="width: 100%;height: 100%;overflow: hidden;"><el-table :data="tableData"><el-table-column prop="date" label="info_Date"  :render-header="renderHeader"/><el-table-column prop="name" label="info_Name"  :render-header="renderHeader"/><el-table-column prop="age" label="info_Age"  :render-header="renderHeader"/><el-table-column prop="gender" label="info_Gender"  :render-header="renderHeader"/><el-table-column prop="type" label="info_Type"  :render-header="renderHeader"/><el-table-column prop="address" label="info_Address"  :render-header="renderHeader"/></el-table></div>
</template>const renderHeader = ({ column }) => {//创建一个元素用于存放表头信息const span = document.createElement('span')// 将表头信息渲染到元素上span.innerText = column.label// 在界面中添加该元素document.body.appendChild(span)//获取该元素的宽度(包含内外边距等信息)const spanWidth = span.getBoundingClientRect().width + 20  //渲染后的 div 内左右 padding 都是 10,所以 +20//判断是否小于element的最小宽度,两者取最大值column.minWidth = column.minWidth > spanWidth ? column.minWidth : spanWidth// 计算完成后,删除该元素document.body.removeChild(span)return column.label
}

效果已经实现

相关文章:

element Plus中 el-table表头宽度自适应,不换行

在工作中&#xff0c;使用el-table表格进行开发后&#xff0c;遇到了小屏幕显示器上显示表头文字会出现换行展示&#xff0c;比较影响美观&#xff0c;因此需要让表头的宽度变为不换行&#xff0c;且由内容自动撑开。 以下是作为工作记录&#xff0c;用于demo演示教程 先贴个…...

【Android】从事件分发开始:原理解析如何解决滑动冲突

【Android】从事件分发开始&#xff1a;原理解析如何解决滑动冲突 文章目录 【Android】从事件分发开始&#xff1a;原理解析如何解决滑动冲突Activity层级结构浅析Activity的setContentView源码浅析AppCompatActivity的setContentView源码 触控三分显纷争&#xff0c;滑动冲突…...

如何使用JDBC向数据库中插入日期数据???

在学习JDBC 的过程中很多小明有疑问在IDEA编辑器是如何插入一个日期类型的数据的&#xff0c;此篇一些方法希望可以帮助到你。 示例&#xff1a; import java.text.ParseException; import java.text.SimpleDateFormat; import java.sql.Date; import java.util.Scanner;publi…...

高频面试题(含笔试高频算法整理)基本总结回顾29

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…...

Flink日志配置

所有Flink进程都会创建一个日志文本文件,其中包含进程中发生的各种事件的消息。这些日志可以深入了解Flink的内部工作原理,还可以用来检测问题(以警告/错误信息的形式),并帮助调试。 可以通过web界面的JobManager/TaskManager页面访问日志文件。使用的资源提供者(例如YA…...

论文 | EfficientRAG: Efficient Retriever for Multi-Hop Question Answering

1. 论文介绍与研究动机 本文提出了一个新的检索增强生成&#xff08;RAG&#xff09;方法——EfficientRAG&#xff0c;它专门用于解决复杂的多跳问题。在多跳问答中&#xff0c;问题的答案需要从多个信息源中检索并结合起来&#xff0c;远比单跳问题复杂&#xff0c;因此也更加…...

超越Hallo和AniPortrait?音频驱动肖像动画新方法LetsTalk

之前的文章中已经给大家介绍过许多关于音频驱动的肖像图像生成动画方法&#xff0c;感兴趣的小伙伴可以点击下面链接阅读~ 复旦开源Hallo&#xff1a;只需输入一段音频和一张照片就可以让人物说话。 开源EMO再升级&#xff01;复旦|百度|南大推出Hallo2&#xff1a;可以生成4…...

手机LCD分区刷新技术介绍

分区刷新也称为分区变频&#xff0c;LCD分区刷新功能的目的是将屏幕分为上下半区&#xff0c;分区显示不同帧率&#xff0c;上方区块High Frame Rate&#xff0c;下方区块Low Frame Rate。使用者可以动态自定义上方高刷显示区的结尾位置。 当前的智能手机屏幕上&#xff0c;显示…...

WPF软件花屏的解决方法

Win10操作系统更新后&#xff0c;软件花屏了&#xff01; WPF为啥还能出现花屏呢&#xff1f; 花屏是个什么现象&#xff1f; 即&#xff1a;WPF的界面不能正确渲染或及时刷新&#xff0c;导致整个界面会出现严重的残影&#xff0c;严重影响使用。 如果存在花屏&#xff0c…...

深度学习笔记——模型压缩和优化技术(蒸馏、剪枝、量化)

本文详细介绍模型训练完成后的压缩和优化技术&#xff1a;蒸馏、剪枝、量化。 文章目录 1. 知识蒸馏 (Knowledge Distillation)基本概念工作流程关键技术类型应用场景优势与挑战优势挑战 总结 2. 权重剪枝 (Model Pruning)基本原理二分类1. 非结构化剪枝&#xff08;Unstructur…...

开发手札:Win+Mac下工程多开联调

最近完成一个Windows/Android/IOS三端多人网络协同项目V1.0版本&#xff0c;进入测试流程了。为了方便自测&#xff0c;需要用unity将一个工程打开多次&#xff0c;分别是Win/IOS/Android版本&#xff0c;进行多角色联调。 在Win开发机上&#xff0c;以Windows版本为主版…...

项目基于oshi库快速搭建一个cpu监控面板

后端&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.github.oshi</groupId><artifactId>oshi-…...

【c语言】指针3

1、字符指针变量 指针类型中我们知道有一种为字符指针char*的指针类型&#xff0c;其使用方法如下&#xff1a; 上面我们是先将字符使用一个变量&#xff0c;然后将变量的地址传给一个字符指针变量&#xff0c;通过指针变 量实现了对这个字符的打印。还有下面的这种…...

【开源】A063—基于Spring Boot的农产品直卖平台的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…...

Can‘t find variable: token(token is not defined)

文章目录 例子 1&#xff1a;使用 var例子 2&#xff1a;使用 let 或 const例子 3&#xff1a;异步操作你的代码中的情况 Cant find variable: tokentoken is not defined源代码 // index.jsPage({data: {products:[],cardLayout: grid, // 默认卡片布局为网格模式isGrid: tr…...

【JavaEE 初阶】⽹络编程套接字

一、⽹络编程基础 1.应用层 操作系统提供的一组 api >socket api(传输层给应用层提供) 2.传输层 两个核心协议. TCPUDP 差别非常大,编写代码的时候,也是不同的风格 因此, socket api 提供了两套 TCP 有连接, 可靠传输, 面向字节流, 全双工 UDP …...

【Linux内核】Hello word程序

创建测试目录 mkdir -p ~/develop/kernel/hello-1 cd ~/develop/kernel/hello-1 创建MakeFile文件和内核.c文件 nano Makefile nano hello-1.c 编写内容 /* * hello-1.c - The simplest kernel module. */ #include <linux/module.h> /* Needed by all modules */…...

PHP 与 MySQL 搭配的优势

一、PHP 与 MySQL 搭配的优势 强大的动态网页开发能力 PHP 是一种服务器端脚本语言&#xff0c;能够生成动态网页内容。它可以根据用户的请求、数据库中的数据等因素&#xff0c;实时地生成 HTML 页面返回给客户端浏览器。而 MySQL 是一个流行的关系型数据库管理系统&#xf…...

深入浅出:PHP中的变量与常量全解析

文章目录 引言理解变量普通变量赋值操作变量间赋值引用赋值取消引用 可变变量预定义变量 理解常量声明常量使用define()函数const关键字 使用常量预定义常量 扩展话题&#xff1a;作用域与生命周期实战案例总结与展望参考资料 引言 在编程的世界里&#xff0c;变量和常量是两种…...

初步简单的理解什么是库,什么是静态库,什么是动态库

库是什么 库根据名字我们应该很容易理解&#xff0c;在我们日常生活种&#xff0c;包含库的东西有很多&#xff0c;像仓库&#xff0c;库房那些&#xff0c;库是拿来存放&#xff0c;方便管理东西的&#xff0c;在我们编程当中&#xff0c;库的定义也是如此 那么为什么要有库…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...