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

针对组件业务上的需求,需要给 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.mzph.cn/bicheng/4283.shtml

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

相关文章

如此建立网络根文件系统 Mount NFS RootFS

安静NFS系统服务 sudo apt-get install nfs-kernel-server 创建目录 sudo mkdir /rootfsLee 将buildroot编译的根文件系统解压缩到 sudo tar xvf rootfs.tar -C /rootfsLee/ 添加文件NFS访问路径 sudo vi /etc/exports sudo /etc/exports文件,添加如下一行 …

网站推荐——文本对比工具

在线文字对比工具-BeJSON.com 文本对比/字符串差异比较 - 在线工具 在线文本对比-文本内容差异比较-校对专用

企业智能名片小程序:AI智能跟进功能助力精准营销新篇章

在数字化浪潮的推动下,企业营销手段不断迭代升级。如今,一款集手机号授权自动获取、智能提醒、访客AI智能跟进及客户画像与行为记录于一体的企业智能名片小程序,正以其强大的AI智能跟进功能,助力企业开启精准营销的新篇章。 通过深…

图像处理到神经网络:线性代数的跨领域应用探索

作者介绍:10年大厂数据\经营分析经验,现任大厂数据部门负责人。 会一些的技术:数据分析、算法、SQL、大数据相关、python 欢迎加入社区:码上找工作 作者专栏每日更新: LeetCode解锁1000题: 打怪升级之旅 python数据分析…

Swift 中的 Range 运算符

在 Swift 中,Range 运算符是一种强大的工具,用于表示一系列连续的数值或字符。Range 可以用于循环、数组切片、条件语句等场景,为我们提供了方便的方法来处理数据集合。 闭区间运算符 a...b 闭区间运算符 a...b 用于创建一个从起始值到结束…

无监督学习的评价指标

轮廓系数(Silhouette Coefficient) 轮廓系数用于判断聚类结果的紧密度和分离度。轮廓系数综合了样本与其所属簇内的相似度以及最近的其他簇间的不相似度。 其计算方法如下: 1、计算簇中的每个样本i 1.计算a(i) &#x…

百度SDK创建应用地址解析失败问题

在百度SDK的设置里先用IP白名单校验全部都通过,项目上线之后再改就行 0.0.0.0/0

【Leetcode每日一题】 分治 - 面试题 17.14. 最小K个数(难度⭐⭐)(66)

1. 题目解析 题目链接:面试题 17.14. 最小K个数 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了。 2.算法原理 在快速排序算法中,我们通常会通过选择一个基准元素,然后将数组划分为三个部分&…

通过Cmake官网下载.gz文件安装最新版本的CMAKE、适用于debian

1.前往官网下载最新版本debian https://cmake.org/download/ 2.选他 3. 通过XFTP传输到服务器 4. 解压文件 #cd 进入对应目录,然后执行下面命令解压 $ tar -zxvf cmake-3.29.2.tar.gz5.执行这个文件 $ ./bootstrap6.完成之后再执行这个 $ make7.然后&#xff…

C++面经(简洁版)

1. 谈谈C和C的认识 C在C的基础上添加类,C是一种结构化语言,它的重点在于数据结构和算法。C语言的设计首要考虑的是如何通过一个过程,对输入进行运算处理得到输出,而对C,首先要考虑的是如何构造一个对象,通…

人工智能|推荐系统——推荐大模型最新进展

近年来,大语言模型的兴起为推荐系统的发展带来了新的机遇。这些模型以其强大的自然语言处理能力和丰富的知识表示,为理解和生成复杂的用户-物品交互提供了新的视角。本篇文章介绍了当前利用大型语言模型进行推荐系统研究的几个关键方向,包括嵌入空间的解释性、个性化推荐的知…

Amazon云计算AWS之[5]关系数据库服务RDS

文章目录 RDS的基本原理主从备份和下读写分离 RDS的使用 RDS的基本原理 Amazon RDS(Amazon Relational Database Service) 将MySQL数据库移植到集群中,在一定的范围内解决了关系数据库的可扩展性问题。 MySQL集群方式采用Share-Nothing架构。每台数据库服务器都是…

【C++】---STL容器适配器之stack

【C】---STL容器适配器之stack 一、什么是适配器?二、栈1、栈的性质2、栈类(1)栈的构造(2)empty()(3)push()(4)pop()(5)top()(6&#…

yolov8 dll 编译

1. 每次用yolo v8 都要用python ,对于我这种写软件的太不方便了,下面尝试编译dll 调用, 我已经有做好的模型.best.pt 参考视频方法: yolov8 TensorRT C 部署_哔哩哔哩_bilibili 【yolov8】tensorrt部署保姆级教程,c版_哔哩哔哩_bilibili 需…

面经总结(二)(数据库)

数据库常识: 1、数据库系统包含什么? 包含了数据库、数据库管理系统、数据库管理员和应用程序。 数据库(DB):顾名思义是存放数据的仓库,实现数据的持久化。 数据库管理系统(DBMS):类似于操作系…

rabbitmq下载安装最新版本--并添加开机启动图文详解!!

一、简介 RabbitMQ是一个开源的遵循AMQP协议实现的消息中间件支持多种客户端语言,用于分布式系统中存储和转发消息, 这是 Release RabbitMQ 3.13.0 rabbitmq/rabbitmq-server GitHub 二、安装前准备 1、查看自己系统 确认操作系统版本兼容性 uname -a2、下载Erlang依赖包…

记录浏览器打开网站拦截提示不安全解决方法

浏览器可能会因为多种原因显示“不安全”的警告,这通常是由于安全设置不当或配置错误造成的。以下是一些常见的原因和解决方法: 1. HTTPS未启用 原因:如果网站使用HTTP而不是HTTPS,浏览器可能会显示不安全的警告。 解决方法:配置SSL/TLS证书并使用HTTPS来加密数据传输…

MySQL数据库常见SQL语句宝典

一 、常用操作数据库的命令 1.查看所有的数据库 : show databases;2.创建一个数据库 : create database if not exists 数据库名;3.删除一个数据库 : drop database if exists 数据库名;4.选择一张表 (注意在建表之前必须要选择数据库) : use 表名;* --tab 键的上面&#x…

K8s 使用 CephFS 作为后端存储(静态供给、动态供给)

一、K8s 使用 CephFS CephFS是 Ceph 中基于RADOS(可扩展分布式对象存储)构建,通过将文件数据划分为对象并分布到集群中的多个存储节点上来实现高可用性和可扩展性。 首先所有 k8s 节点都需要安装 ceph-common 工具: yum -y ins…

Vue 组件分类、局部注册和全局注册

文章目录 背景知识组件分类安装 vue-cli示例设置组件局部注册设置组件全局注册 背景知识 开发 Vue 的两种方式: 核心包传统开发模式:基于 html / css / js 文件,直接引入核心包,开发 Vue。工程化开发模式:基于构建工…