vue3中实现内容溢出隐藏以及显示提示属性

ops/2024/10/18 7:52:38/

使用:show-overflow-tooltip="true"

    <el-table :data="serviceList" style="width: 100%"><el-table-column align="center" label="序号" prop="index" width="80" fixed /><el-table-column :show-overflow-tooltip="true" align="center" label="中文题目" width="500" fixed><template #default="scope"><el-link class="linkColor" @click="detailService(scope.row)"> {{ scope.row.name }} </el-link></template></el-table-column><el-table-column :show-overflow-tooltip="true" align="center" label="发表刊名" prop="periodical" width="100" /><el-table-column :show-overflow-tooltip="true" align="center" label="所属领域" prop="signory" width="220" /><el-table-column :show-overflow-tooltip="true" align="center" label="所属单位" prop="platAndEnterPriseInfo" width="200" /><el-table-column :show-overflow-tooltip="true" align="center" label="作者" prop="personnel" width="200" /><el-table-column :show-overflow-tooltip="true" align="center" label="发表日期" prop="outputTime" width="120" /><el-table-column :show-overflow-tooltip="true" align="center" label="更新时间" prop="updateTime" width="100" fixed="right"/><!-- 没有审核中的状态 暂时未做判断 --><el-table-column align="center" label="操作" prop="name" width="150" fixed="right"><template #default="scope"><el-tooltip content="编辑" placement="top"><el-button link type="warning" icon="Edit" @click="editService(scope.row)"></el-button></el-tooltip><el-tooltip content="详情" placement="top"><el-button link type="success" icon="View" @click="detailService(scope.row)"></el-button></el-tooltip><!-- <el-text class="mx-1" type="danger" @click="deleteServiceItem(scope.row)" >删除</el-text> --></template></el-table-column></el-table>

注意:这里是使用了Tooltip 文字提示组件

实现溢出内容自动隐藏,可使用css,可以直接给元素标签使用下:show-overflow-tooltip="true"

 看此组件是否带了隐藏样式,不行得话,再单独使用如下css实现

.overflow-hidden {  overflow: hidden; /* 隐藏溢出内容 */  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */  white-space: nowrap; /* 防止文本换行 */  width: 100px; /* 设置容器宽度以触发溢出 */  
}


http://www.ppmy.cn/ops/39229.html

相关文章

recycleview和banner新闻列表轮播图

说明&#xff1a;最近碰到一个需求&#xff0c;弄一个新闻列表和轮播图&#xff0c;在首页显示&#xff0c;并且需要json解析&#xff0c;图片下载&#xff0c;轮播图和新闻列表一起滑动 ui效果图&#xff1a; 文件说明&#xff1a; step1:引用依赖包 图片下载 json解析 轮播…

TypeError: __init__() got an unexpected keyword argument ‘logger‘

TypeError: __init__() got an unexpected keyword argument logger 执行python程序报错&#xff0c;博主出现这个问题最后解决办法是通过升级python到最新版3.12解决的。记住安装python时&#xff0c;要让它帮你配置好环境变量&#xff0c;如果默认不配置的话&#xff0c;还是…

掌握Ansible命令——提高自动化运维效率

目录 一、Ansible命令 1.定义 2.组成 3.命令格式 4.选项 5.示例 二、常用命令解释 1.ansible-doc 2.ansible-galaxy 3.ansible-playbook 4.ansible-pull 5.ansible-vault 三、高频使用的命令 1.Ping主机 2.执行命令 3.安装软件包 4.管理文件 5.管理服务 6.获…

使用sqlmodel实现唯一性校验

代码&#xff1a; from sqlmodel import Field, Session, SQLModel, create_engine# 声明模型 class User(SQLModel, tableTrue):id: int | None Field(defaultNone, primary_keyTrue)# 不能为空&#xff0c;必须唯一name: str Field(nullableFalse, uniqueTrue)age: int | …

python中的数据可视化:二维直方图 hist2d()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 python中的数据可视化&#xff1a; 二维直方图 hist2d() 选择题 关于以下代码输出结果的说法中正确的是? import matplotlib.pyplot as plt import numpy as np x np.random.normal(0, 1, …

spring boot参数验证注解@NotNull、@NotBlank和@NotEmpty区别

目录 前言说明举例 前言 使用spring boot参数验证是常常会使用NotNull、NotBlank和NotEmpty三个判断是否不为空的注解&#xff0c;中文都有不能为空的意思&#xff0c;大部分使用者都傻傻分清它们之间到底有什么区别。今天就让咱们来一起探索它们之间的不同吧。 说明 注解名…

【敦煌网注册/登录安全分析报告】

敦煌网注册/登录安全分析报告 前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大…

axios配置 responseType: “blob“

在使用 Axios 进行网络请求时&#xff0c;配置 responseType: "blob" 是用来指示 Axios 将响应体作为 Blob 对象处理。这在文件下载功能中特别有用&#xff0c;因为 Blob 对象可以被用来创建一个指向该文件内容的 URL&#xff0c;进而触发浏览器的下载行为或者在页面…