el-table表格列宽度自适应
需求:表格错误描述列 要求按照内容最大值设置宽度;如果没有值 则设置最小宽度
<el-table-columnv-else-if="item.prop === 'errorDescription'":key="item.code":width="flexColumnWidth('errorDescription', tableConfigA.tableDataA)":fixed="item.fixed":prop="item.prop":align="item.align":label="item.label":show-overflow-tooltip="true"><template v-slot="scope"><div class="optionDiv" style="white-space: nowrap; display: inline-block">{{ scope.row.errorDescription }}</div></template></el-table-column>
// 自适应表格列宽
function flexColumnWidth(str, tableData, flag = 'max') {// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max'// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。str = str + ''let columnContent = ''if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {return}if (!str || !str.length || str.length === 0 || str === undefined) {return}if (flag === 'equal') {// 获取该列中第一个不为空的数据(内容)for (let i = 0; i < tableData.length; i++) {if (tableData[i][str].length > 0) {columnContent = tableData[i][str]break}}} else {// 获取该列中最长的数据(内容)let index = 0for (let i = 0; i < tableData.length; i++) {if (tableData[i][str] === null) {return}const now_temp = tableData[i][str] + ''const max_temp = tableData[index][str] + ''if (now_temp.length > max_temp.length) {index = i}}columnContent = tableData[index][str]}// 以下分配的单位长度可根据实际需求进行调整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符,为字符分配8个单位宽度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符,为字符分配15个单位宽度flexWidth += 15} else {// 其他种类字符,为字符分配8个单位宽度flexWidth += 8}}if (flexWidth < 120) {// 设置最小宽度flexWidth = 120}return flexWidth + 'px'
}
最后效果:
相关文章:
el-table表格列宽度自适应
需求:表格错误描述列 要求按照内容最大值设置宽度;如果没有值 则设置最小宽度 <el-table-columnv-else-if"item.prop errorDescription":key"item.code":width"flexColumnWidth(errorDescription, tableConfigA.tableDataA…...
Mysql存储过程(附案例)
文章目录 存储过程概述1、基本语法2、变量①、系统变量②、用户自定义变量③、局部变量 3、流程控制语句①、if语句②、参数③、case语句④、while语句⑤、repeat语句⑥、loop语句⑦、cursor游标⑧、handler 4、存储函数 存储过程概述 存储过程是事先经过编译并存储在数据…...
宇树科技申请 “机器人牌照” 商标,剑指机器人领域新高度
近日,据天眼查信息显示,杭州宇树科技有限公司有了一项重大举动,其申请注册了 “机器人牌照”“机牌”“Robot license”“Robot plate” 等商标,国际分类涉及科学仪器、运输工具、广告销售等多个领域,当前商标状态均为…...
计算机图形学基础--Games101笔记(一)数学基础与光栅化
数学基础 向量 点乘,叉乘和投影: 插值 三角形插值 **重心坐标:**我们通过任意点的重心坐标来插值。 V α V A β V B γ V C V\alpha V_A\beta V_B\gamma V_C VαVAβVBγVC。注意重心坐标没有投影不变性,如果插值三…...
Chrome拓展(Chrome Extension)开发定时任务插件
Chrome扩展定时任务插件开发指南 核心实现原理 使用Chrome Alarms API实现定时触发通过Service Worker保持后台运行本地存储保存任务配置 开发步骤 创建manifest文件 (manifest.json) {"manifest_version": 3,"name": "定时任务助手","…...
100G QSFP28 BIDI光模块一览:100G单纤高速传输方案|易天光通信
目录 前言 一、易天光通信100G QSFP28 BIDI光模块是什么? 二、易天光通信100G QSFP28 BIDI光模块采用的关键技术 三、100G QSFP28 BIDI光模块的优势 四、以“易天光通信100G BIDI 40km ER1光模块”为例 五、总结:高效组网,从“减”开始 关于…...
每日Prompt:迷你 3D 建筑
提示词 3D Q版迷你风格,一个充满奇趣的迷你星巴克咖啡馆,外观就像一个巨大的外带咖啡杯,还有盖子和吸管。建筑共两层,大大的玻璃窗清晰地展示出内部温馨而精致的设计:木质的家具、温暖的灯光以及忙碌的咖啡师们。街道…...
从另一个视角理解TCP握手、挥手与可靠传输
本文将深入探讨 TCP 协议中三次握手、四次挥手的原理,以及其保证可靠传输的机制。 一、三次握手:为何是三次,而非两次? 建立 TCP 连接的过程犹如一场严谨的 “对话”,需要经过三次握手才能确保通信双方的可靠连接。 三…...
SearxNG本地搜索引擎
SearxNG 是一个强大、开源的 元搜索引擎(meta search engine),它不会存储用户信息,注重隐私保护,并支持从多个搜索引擎聚合结果,用户可以自建部署,打造一个无广告、可定制的搜索平台。 🔍 什么是 SearxNG? SearxNG 是 Searx 的一个积极维护的分支(fork),意在改进…...
基于支持向量机(SVM)的P300检测分类
基于支持向量机(SVM)的P300检测分类MATLAB实现,包含数据预处理、特征提取和分类评估流程: %% P300检测分类完整流程(SVM实现) clc; clear; close all;%% 1. 数据加载与模拟生成(实际应用需替换…...
Oracle学习日记--Oracle中使用单个inert语句实现插入多行记录
目录 前言: 问题现象: 问题分析: 解决方法: 1、insert into ... union all句式 2、insert all into ...select 1 from dual句式 总结: 前言: 最近项目中使用到了Oracle数据库,由于Oracle数…...
利用边缘计算和工业计算机实现智能视频分析
在人工智能和物联网取得重大进步的时代,智能视频分析(IVA)正在通过整合先进的人工智能技术来改变视频监控和分析。这项革命性的技术增强了视觉智能,是关键行业创新解决方案的驱动因素。在本文中,我们将介绍IVA的好处、…...
tomcat一闪而过,按任意键继续以及控制台中文乱码问题
问题描述 今天在打开tomcat,启动startup.bat程序时 tomcat直接闪退,后面查找资料后发现,可以通过编辑startup.bat文件内容,在最后一行加入pause即可让程序不会因为异常而终止退出 这样方便查看tomcat所爆出的错误: 然后,我明确看到我的tomcat启动程序显示如下的内容,没有明确…...
go 集成base64Captcha 支持多种验证码
base64Captcha 是一个基于 Go 语言开发的验证码生成库,主要用于在 Web 应用中集成验证码功能,以增强系统的安全性。以下是其主要特点和简介: base64Captcha主要功能 验证码类型丰富:支持生成多种类型的验证码,包括纯…...
【数据结构】线性表--栈
【数据结构】线性表--栈 一.什么是栈二.栈的实现1.栈结构定义:2.栈的初始化:3.栈的销毁:4.插入函数:5.删除函数:6.求栈顶元素:7.求数据个数:8.判空: 三.总结 一.什么是栈 栈是一种重…...
基于亚博K210开发板——麦克风录播测试
开发板 亚博K210开发板 实验目的 本次测试主要学习 K210 通过 I2S 接收和发送的功能,麦克风录音,扬声器播放。 实验准备 实验元件 扬声器、麦克风 元件特性 K210 开发板的麦克风同样是使用 I2S 传输数据,只不过麦克风使用的是 I2S…...
操作系统-锁/内存/中断/IO
文章目录 锁自旋锁互斥锁悲观锁和乐观锁 内存管理物理/虚拟内存页表段表虚拟内存布局写时复制copy on writebrk,mmap页面置换算法 中断中断分类中断流程 网络I/OI/O模型服务器处理并发请求 锁 自旋锁 自旋锁是一种基于忙等待(Busy-Waiting)…...
割点与其例题
割点 定义: 若一个点在图中被去掉后,图的连通块个数增加,那么这个点就被称为“割点”。如下图所示红点。 定义说白了就是若去掉一个点,图被“断开”的点称为割点。 朴素算法: 枚举每个点 u。遍历图,如果…...
CSS实现文本自动平衡text-wrap: balance
不再有排版孤行和寡行 我们都知道那些标题,最后一个单词换行并单独站在新行上,破坏了视觉效果,看起来很奇怪。当然,有老式的 手动换行或将内容分成不同部分。但您听说过text-wrap: balance吗? 通过应用text-wrap: bal…...
【未完】【GNN笔记】EvolveGCN:Evolving Graph Convolutional Networks for Dynamics Graphs
Evolving Graph Convolutional Networks for Dynamics Graphs 视频链接:《图神经网络》 相关系列: 《Dynamic Graph的分类》《动态图网络之Dynamic Self-Attention Network》 文章目录 Evolving Graph Convolutional Networks for Dynamics Graphs一、…...
【愚公系列】《Manus极简入门》042-投资策略分析师:“投资智慧导航”
🌟【技术大咖愚公搬代码:全栈专家的成长之路,你关注的宝藏博主在这里!】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主! …...
《AI大模型应知应会100篇》第65篇:基于大模型的文档问答系统实现
第65篇:基于大模型的文档问答系统实现 📚 摘要:本文详解如何构建一个基于大语言模型(LLM)的文档问答系统,支持用户上传 PDF 或 Word 文档,并根据其内容进行智能问答。从文档解析、向量化、存储到…...
P1439 【模板】最长公共子序列
P1439 【模板】最长公共子序列 - 洛谷 题目描述 给出1, 2, …, n的两个排列P1和P2,求它们的最长公共子序列。 输入格式 第一行是一个数n。 接下来两行,每行为n个数,为自然数1, 2, …, n的一个排列。 输出格式 一个数,即…...
LLaMA-Factory:环境准备
一、硬件和系统 操作系统: Ubuntu 24.04.2 LTS(64位)GPU: NVIDIA RTX 4090 笔记本 GPU,16GB显存CPU: 建议高性能多核 CPU(如 Intel i7/i9 或 AMD Ryzen 7/9)以支持数据预处理,我的是32核。RAM: 至少 32GB&…...
polarctf-web-[rce1]
考点: (1)RCE(exec函数) (2)空格绕过 (3)执行函数(exec函数) (4)闭合(ping命令闭合) 题目来源:Polarctf-web-[rce1] 解题: 这段代码实现了一个简单的 Ping 测试工具,用户可以通过表单提交一个 IP 地址,服务器会执…...
AI实践用例---日程规划(通用日程管理文件ICS)灵感踩坑日常
我是一位践行独立开发者之路的菜鸟开发者。 由于执行力较差,常常有很多想法但是很多时候没有去践行。 所以我有了让大模型为我生成日程安排的想法,这确实可以,很简单。只需要将你的想法告诉ai就行了。 例如: 发给AI的提示词: 我想你帮我对,嗯,未来的一年做一个嗯,大…...
MySQL 8.0 OCP 1Z0-908 121-130题
Q121.Examine these statements and output: mysql> GRANT PROXY ON accountinglocalhost TO ’ ‘ ‘%’; mysql> SELECT USER(), CURRENT_USER(), proxy_user; --------------------------------------------------------- |USER() | CURRENT_USER() | proxy_user I | …...
InfluxDB 2.7 连续查询实战指南:Task 替代方案详解
InfluxDB 2.7 引入了 Task 功能,作为连续查询(CQ)的现代替代方案。本文详细介绍了如何使用 Task 实现传统 CQ 的功能,包括语法解析、示例代码、参数对比以及典型应用场景。通过实际案例和最佳实践,帮助开发者高效迁移并…...
计算机网络 : Socket编程
计算机网络 : Socket编程 目录 计算机网络 : Socket编程引言1.UDP网络编程1.1 网络地址与端口转换函数1.2 本地环回1.3 EchoServer1.4 DictServer1.5 DictServer封装版1.6 简单聊天室 2.TCP网络编程2.1 TCP Socket API详解2.2 Echo Server2.3 Echo Serve…...
C++动态内存分配
内存管理 1.代码段(Code Segment / Text Segment)常量区2. 数据段(Data Segment)静态区3. BSS 段(未初始化数据段)4. 堆(Heap)5. 栈(Stack)6. 内存映射段&…...
git版本控制学习
1.环境搭配 2.Linux常用指令 cd:更改目录cd..回到上一级目录pow:显示当前所在的目录路径li(||):列出当前目录所有文件,只不过||例出的内容更为详细touch:新建一个文件夹如touch index.js就会在当前目录下新建一个index.js文件rm:删除一个文件,rm index.js 就会把in…...
在MYSQL中导入cookbook.sql文件
参考资料: GitHub 项目:svetasmirnova/mysqlcookbook CSDN 博客:https://blog.csdn.net/u011868279/category_11645577.html 建库: mysql> use mysql Reading table information for completion of table and column names …...
安科瑞AcrelEMS3.0企业微电网智慧能源平台-安科瑞 蒋静
1、平台介绍 Acrel-EMS3.0 智慧能源平台是针对企业微电网的能效管理平台,满足江苏省《新型电力负荷管理系统数据接入规范》的技术架构,可通过云云互联方式接受电力平台的调度指令和策略下发,支持作为微网调度子系统或子平台。 2、解决方案 …...
5G-A和未来6G技术下的操作系统与移动设备变革:云端化与轻量化的发展趋势
目录 5G技术带来的革命性变革 云端化操作系统的实现路径 完全云端化模式 过渡性解决方案 未来操作系统的发展方向 功能架构演进 安全机制强化 移动设备的形态变革 终端设备轻量化 物联网设备简化 实施挑战与应对策略 技术挑战 商业模式创新 总结与展望 5G技术作为…...
TensorFlow/Keras实现知识蒸馏案例
创建一个“教师”模型(一个稍微复杂点的网络)。创建一个“学生”模型(一个更简单的网络)。使用“软标签”(教师模型的输出概率)和“硬标签”(真实标签)来训练学生模型。 import tens…...
能源数字化转型关键引擎:Profinet转Modbus TCP网关驱动设备协同升级
在工业自动化的世界中,ModbusTCP和Profinet是两个非常重要的通讯协议。ModbusTCP以其开放性和易用性,被广泛应用于各种工业设备中;而Profinet则以其高效性和实时性,成为了众多高端设备的首选。然而,由于这两种协议的差…...
大模型的实践应用43-基于Qwen3(32B)+LangChain框架+MCP+RAG+传统算法的旅游行程规划系统
大家好,我是微学AI,今天给大家介绍一下大模型的实践应用43-基于Qwen3(32B)+LangChain框架+MCP+RAG+传统算法的旅游行程规划系统。本报告将阐述基于大模型Qwen3(32B)、LangChain框架、MCP协议、RAG技术以及传统算法构建的智能旅游行程规划系统。该系统通过整合多种技术优势,实…...
【Unity】用事件广播的方式实现游戏暂停,简单且实用!
1.前言 在做Unity项目的时候,要考虑到“游戏暂停”的功能,最直接的办法是修改游戏的Time.TimeScale 0f。但是这种方式的影响也比较大,因为它会导致游戏中很多程序无法正常运行。 于是我就有了一个想法,在游戏中想要暂停的对象&…...
二维数组以及C99中的变长数组(如何在VS2022中使用苹果的clang编译器)
一、二维数组的创建 1.1 二维数组的概念 在上一篇文章中所写的称为一维数组,数组的元素都是内置类型的,如果我们把一维数组作为数组的元素,这时候就是二维数组,二维数组作为数组元素的数组被称为三维数组,二维数组以…...
影楼精修-肤色统一算法解析
注意:本文样例图片为了避免侵权,均使用AIGC生成; 本文介绍影楼精修中肤色统一算法的实现方案,并以像素蛋糕为例,进行分析说明。 肤色统一就是将人像照片中皮肤区域的颜色进行统一,看起来颜色均匀一致&…...
mac的Cli为什么输入python3才有用python --version显示无效,pyenv入门笔记,如何查看mac自带的标准库模块
根据你的终端输出,可以得出以下结论: 1. 你的 Mac 当前只有一个 Python 版本 系统默认的 Python 3 位于 /usr/bin/python3(这是 macOS 自带的 Python)通过 which python3 确认当前使用的就是系统自带的 Pythonbrew list python …...
城市内涝监测预警系统守护城市安全
一、系统背景 城市内涝是指由于强降水或连续性降水超过城市排水能力,导致城市内产生积水灾害的现象。随着气候变化和城市化进程的加快,城市内涝现象愈发频繁和严重。传统的城市排水系统已难以满足当前的城市排水需求,特别是在暴雨等极端天气条…...
ThinkPad X250电池换电池芯(理论技术储备)
参考:笔记本电池换电芯的经验与心得分享 - 经典ThinkPad专区 - 专门网 换电池芯,需要克服以下问题: 1 拆电池。由于是超声波焊接,拆解比较费力,如果暴力撬,有可能导致电池壳变形... 2 替换电池芯的时候如…...
2025第三届盘古初赛(计算机部分)
前言 比赛的时候时间不对,打一会干一会,导致比赛时候思路都跟不上,赛后简单复现一下,希望大家批批一下 计算机取证 1、分析贾韦码计算机检材,计算机系统Build版本为?【标准格式:19000】 183…...
qtc++ qdebug日志生成
本文介绍了将qdebug注册到日志系统,这样qdebug打印的信息将记录在日志文本文件,方便观看程序运行中的历史信息,但是需要注意的是,注册后qdebug的信息将不会打印在qtcreator的输出中,所以作者建议,在开发的时…...
Tomcat 配置 HTTPS 访问全攻略(CentOS 环境)
Tomcat 配置 HTTPS 访问全攻略(CentOS 环境) 一、环境说明 操作系统:CentOS Tomcat 版本:Apache Tomcat/9.0.105 服务器 IP:192.168.1.35 目标:将 Tomcat 默认的 HTTP 访问升级为 HTTPS,提…...
20250516使用TF卡将NanoPi NEO core开发板出厂的Ubuntu core22.04.3系统降级到Ubuntu core16.04.2
20250516使用TF卡将NanoPi NEO core开发板出厂的Ubuntu core22.04.3系统降级到Ubuntu core16.04.2 2025/5/16 10:58 缘起:NanoPi NEO core核心板出厂预制的OS操作系统为Ubuntu core22.04.3系统。 【虽然是友善之臂提供的最新的系统,但是缺少很多用用程序…...
针对大事务问题对业务存储过程改造
针对大事务问题对业务存储过程改造 一、问题描述 1. 问题现象 业务调用存储过程没有成功,发现存在大事务,单独拿出来执行发现问题。 greatsql> INSERT INTOywdb1.t1(TIMEKEY,zbbh,zcbl,zcblms,zjzh,zjzhms,cbzh,ljzjzh,xmbh,xmmc,sfgj,dd,ddsm,cb…...
如何解决Move to iOS 不起作用的问题?
iPhone 16系列已经上市有一段时间了。你已经把旧的 Android 手机换成了 iPhone 16 了吗?然而,当您兴奋地准备传输数据时,您发现 Move to iOS 无法正常工作。这确实令人沮丧。但不用担心,因为我们找到了 9 个有效的解决方案&#x…...
npm cross-env工具包介绍(跨平台环境变量设置工具)
文章目录 cross-env:跨平台环境变量设置工具什么是cross-env?为什么需要cross-env?平台差异带来的问题 cross-env的工作原理核心功能技术实现 安装与基本使用安装步骤基本使用方法运行效果 高级使用技巧设置多个环境变量环境变量传递与链式命…...