el-table-column 表格列自适应宽度的组件封装说明

news2024/11/20 1:45:20

针对组件业务上的需求,需要给 el-table-column 加上限制,需保证表头在一行展示,部分列的内容要一行展示,自适应单项列的宽度;

1、先计算数据渲染后的 el-table-column 文本宽度;

因列表的有些数据需要做到数值映射显示,只能等数据渲染完后,再做文本的宽度计算;

计算文本宽度的方法 - calcTextWidth:
在这里插入图片描述

计算渲染后表格每一列的最大宽度 - tableColumnWidth:
在这里插入图片描述
在这里插入图片描述

2、对于 el-table-column 组件的封装,需要比较列的宽度与表头的宽度:

在这里插入图片描述
在这里插入图片描述

在.vue 业务代码中使用:
采用混淆的模式,将 tableColumn 组件名替换 el-table-column,加上一个属性:column-width,属性值为混淆 js 的 columnWidthObj.xxx(xxx 为 prop 属性值);
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、实际表格的效果图:
在这里插入图片描述

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

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

相关文章

OpenCV的图像矩(64)

返回:OpenCV系列文章目录(持续更新中......) 上一篇:OpenCV如何为等值线创建边界旋转框和椭圆(63) 下一篇 :OpenCV系列文章目录(持续更新中......) Image Moments(图像矩)是 OpenCV 库中的一个…

后端方案设计文档结构模板可参考

文章目录 1 方案设计文档整体结构2 方案详细设计2.1 概要设计2.2 详细设计方案2.2.1 需求分析2.2.2 业务流程设计2.2.3 抽象类:实体对象建模2.2.4 接口设计2.2.5 存储设计 1 方案设计文档整体结构 一,现状:把项目的基本情况和背景都说清楚&a…

Golang | Leetcode Golang题解之第60题排列序列

题目&#xff1a; 题解&#xff1a; func getPermutation(n int, k int) string {factorial : make([]int, n)factorial[0] 1for i : 1; i < n; i {factorial[i] factorial[i - 1] * i}k--ans : ""valid : make([]int, n 1)for i : 0; i < len(valid); i {…

如何避免被恶意攻击的IP地址

随着互联网的普及和发展&#xff0c;网络安全问题日益受到关注&#xff0c;恶意攻击成为网络安全的一大威胁。而IP地址作为网络通信的基础&#xff0c;常常成为恶意攻击的目标之一。本文将探讨如何避免被恶意攻击的IP地址&#xff0c;提高网络安全水平。 1. 定期更新安全补丁 …

AC+AP三层组网实验(华为)

一&#xff0c;技术简介 APAC架构是一种常见的无线局域网&#xff08;WLAN&#xff09;组网方式&#xff0c;主要由接入点&#xff08;Access Point&#xff0c;简称AP&#xff09;和接入控制器&#xff08;Access Controller&#xff0c;简称AC&#xff09;组成。 在APAC架构…

Stable Diffusion教程:额外功能/后期处理/高清化

"额外功能"对应的英文单词是Extras&#xff0c;算是直译。但是部分版本中的翻译是“后期处理”或者“高清化”&#xff0c;这都是意译&#xff0c;因为它的主要功能是放大图片、去噪、修脸等对图片的后期处理。注意这里边对图片的处理不是 Stable Diffusion 本身的能…

使用docker创建rocketMQ主从结构,使用

1、 创建目录 mkdir -p /docker/rocketmq/logs/nameserver-a mkdir -p /docker/rocketmq/logs/nameserver-b mkdir -p /docker/rocketmq/logs/broker-a mkdir -p /docker/rocketmq/logs/broker-b mkdir -p /docker/rocketmq/store/broker-a mkdir -p /docker/rocketmq/store/b…

Python+PYGObject/PYGtk+CSS样式--2024python示例

隔久点不用老是会忘&#xff0c;留个笔记。。 PythonPYGObject/PYGtk&#xff0c;加载 CSS 样式的演示代码 demo 运行的效果截图&#xff1a; #!/usr/bin/env python3 import sys import gigi.require_version("Gtk", "3.0") from gi.repository import …

飞书API(6):使用 pandas 处理数据并写入 MySQL 数据库

一、引入 上一篇了解了飞书 28 种数据类型通过接口读取到的数据结构&#xff0c;本文开始探讨如何将这些数据写入 MySQL 数据库。这个工作流的起点是从 API 获取到的一个完整的数据&#xff0c;终点是写入 MySQL 数据表&#xff0c;表结构和维格表结构类似。在过程中可以有不同…

大型企业总分支多区域数据传输,效率为先还是安全为先?

大型企业为了业务拓展需要&#xff0c;会在全国乃至全球各地设立分公司和办事机构&#xff0c;以便更好地处理当地事务&#xff0c;并进行市场的开拓和客户维护&#xff0c;此时&#xff0c;企业内部就衍生出了新的业务需求&#xff0c;即多区域数据传输。 多区域很难准确定义&…

C++相关概念和易错语法(10)(定位new、模板)

1.定位new 我们使用类来实例化对象&#xff0c;开辟空间的时候会自动去调用它的构造函数。但在那篇博客我就特意强调过&#xff0c;使用a.A()的方式是错误的&#xff0c;A()根本不会被识别为一个构造函数&#xff0c;而会被识别为A类型。因此我们要注意最好在实例化对象&#…

test4282

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

ChatGPT 网络安全秘籍(一)

原文&#xff1a;zh.annas-archive.org/md5/6b2705e0d6d24d8c113752f67b42d7d8 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 在不断发展的网络安全领域中&#xff0c;由 OpenAI 推出的 ChatGPT 所代表的生成式人工智能和大型语言模型&#xff08;LLMs&#xf…

首页最新 多IP浏览器防关联:如何配置多个独立且稳定的IP地址?

在互联网时代&#xff0c;IP地址的重要性不言而喻。然而&#xff0c;IP关联问题却成为一项令人担忧的隐私和安全挑战。针对这个问题&#xff0c;多IP浏览器是一种解决方案&#xff0c;可以帮助用户单独配置多个独立且稳定的IP地址&#xff0c;有效地防止IP关联。 一、IP关联是…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(七)

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 14 节&#xff09; P14《13.ArkUI组件-自定义组件》 将可变部分封装成组件的成员变量&#xff1a; 1、首先给标题添加两个图标&am…

百川crm系统 教育crm系统 一款高效的培训机构管理系统

在教育培训行业日益竞争激烈的今天&#xff0c;如何精准把握客户需求、提升服务质量、实现客户价值最大化&#xff0c;成为了每一家教育培训机构都必须面对的问题。为此&#xff0c;一款高效、智能的CRM客户管理系统成为了教育培训机构不可或缺的得力助手。本文将为您详细介绍这…

使用xshell工具连接ubuntu的root账户被拒绝的解决方法

问题描述&#xff1a; 我在使用xshell工具远程连接Ubuntu虚拟机的过程中&#xff0c;如果连接的是的普通用户则xshell工具可以正常连接&#xff0c;但是当我向连接ubuntu系统的root用户&#xff0c;即便是密码输入正确但还是不能连接成功。不能连接成功的截图如下&#xff1a; …

C#---使用Coravel实现定时任务

Coravel是一款框架轻&#xff0c;使用简单&#xff0c;支持秒级定时任务。 1.添加NuGet引用 2.定义自己的工作任务 using Coravel.Invocable; using Microsoft.Extensions.Logging; using System; using System.Collections.Generic; using System.Linq; using System.Thread…

【navicat】oracle library is not loaded 问题复现和解决方案

问题原因&#xff1a;客户端oci版本安装错误&#xff0c;navicat需要64位的oci,但是使用32位的oci。 解决方案&#xff1a;官网下载64位oci进行配置。本次演示的解决多了splplus&#xff0c;其实不必要安装也能运行。 首先判断是否数据库已经打开 尝试使用splplus连接数据库 1…

MYSQL自联结

文章目录 查找&#xff1a;生产ID为DTNTR物品的供应商&#xff0c;生产的其他物品。子查询自联结比较 查找&#xff1a;生产ID为DTNTR物品的供应商&#xff0c;生产的其他物品。 子查询 SELECTprod_id,prod_name FROMproducts WHEREvend_id ( SELECT vend_id FROM product…