el-table-column中文字内容过长时如何隐藏多余文字并浮窗显示

最新推荐文章于 2024-06-14 07:44:22 发布
最新推荐文章于 2024-06-14 07:44:22 发布
阅读量4.3k 收藏 9
点赞数 6
分类专栏： 前端 文章标签： html css javascript vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kakarotto_lu/article/details/120240653
版权

在 el-table 中有时显示的文字过多，会导致表格显的臃肿，下面是修改前的样子：

在这里插入图片描述

修改后：

在这里插入图片描述

方法：

  1. 在标签中加入“:show-overflow-tooltip=“true””
<el-table-column prop="remark" label="说明" align="center" :show-overflow-tooltip="true"></el-table-column>
Neo_LJH
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-tabs字数过多鼠标悬浮显示tooltips
weixin_54252683的博客
08-31 605
el-tabs字数过多鼠标悬浮显示tooltips。
vue列表展示三个字多余字用省略号代替并有悬浮查看全部文字功能
qq_44278386的博客
07-27 913
最近在做运营后台的时候，常常出现列表页单元格里内容很长的情况，展示不太美观，有时产品也会规定省略号代替这种需求。 <el-table-column label="表头（属性为text）"> <template slot-scope="scope"> <el-popover placement="top" trigger="hover" :disabled="scope.row.text.length <= 3" > &l
VUE3 element-ui table文字过长-进行省略溢出处理
m0_62017325的博客
12-21 1425
VUE3 element-ui table文字过长-进行省略溢出处理
element table文本超出隐藏
qq_37550440的博客
11-03 1166
<template> <div class="box"> <el-table :data="rightList" :header-cell-style="{ 'background-color': '#04112d', height: '90px', padding: '0', 'text-align': 'center', 'border-bottom': '.
Element-UI 解决el-table合并行+固定列鼠标浮动高亮问题
weixin_41902457的博客
09-27 4198
el-table应用
vue技巧（六）table column列信息太长悬浮展示
Interest1_wyt的博客
12-12 2968
vue中使用table展示列表信息时，如果信息太长展示会很丑，table自带的溢出悬浮展示功能很不美观，而且悬浮框很难支持拷贝。这里记录下自己使用的悬浮展示代码，便于后续复制使用。 <el-table-column prop="measures" label="度量"> <template slot-scope="scope"> <el-popover placement="top"
el-table-column列内容过长时隐藏多余内容，并在鼠标点击到时悬浮显示
青莳的博客
11-23 3138
第一种实现方式比较简单，添加:show-overflow-tooltip="true"属性即可，但是这种方式下鼠标一离开表格悬浮气泡就会消失，导致无法很好的复制内容。第二种方式写法复杂点，但鼠标可以很方便的选择悬浮气泡内的内容进行复制。
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
el-table加入无限滚动，并且可以控制列是否显示以及列的排序，不是网上大部分的json配置形式
改变el-table宽度
12-12
`:width`的值来自`tableColumn`对象，通过`tableColumn['tab-table-1'][索引]`获取，这里的`'tab-table-1'`是表格ID，索引对应于`el-table-column`在`tableColumn`数组中的位置。 在`mounted`生命周期钩子中，`...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
el-table-column悬浮时展示自定义内容，且el-popover的样式修改
weixin_54351962的博客
04-19 3457
一.需求 要求列表某一列展示后端返回的对应字段，悬浮时展示另一个字段内容 二.代码和注释如下 <el-table-column prop="customerRealName" //列表这一列展示customerRealName这个对应字段的内容 label="需求人" min-width="8%" sortable='custom' show-overflow-tooltip > <template slot-
Vue：element-ui中表格过长内容隐藏显示
热门推荐
sssxlxwbwz的博客
08-13 1万+
element-ui中表格过长内容隐藏显示及复制
el-table-column 单元格文字过长显示问题，缩略显示
qq_40809206的博客
07-22 3080
el-table-column 单元格文字过长显示问题，缩略显示
el-table 列内容溢出 显示省略号 悬浮显示文字
Sunshine_Jian的博客
08-03 1万+
el-table 表格列内容溢出，文本溢出，显示省略号，单行、多行省略；鼠标悬浮hover（点击click等其他其他事件）显示文字，包括el-tooltip、el-popover、show-overflow-tooltip、title等其他的一些实现方法的总结，以及一些想法的分享！...
关于el-table表格中某单元格内容过多，自定义几行后隐藏并鼠标悬浮提示
leoz1的博客
08-24 895
多行隐藏 悬浮提示
elementui表格内文字太多设置溢出隐藏,鼠标移入显示并设置宽度大小
web_long的博客
03-24 5093
1.只需要给elementui标签上边添加属性:show-overflow-tooltip="true"即可设置鼠标显示 代码: <el-table-column label="内容" :show-overflow-tooltip="true"> </el-table-column> 2.如果鼠标移入显示内容过多的话可以设置显示的宽度或者设置为隐藏的 <style> .el-tooltip__popper{ displ
HTML初体验
最新发布
linux423的博客
06-14 497
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
el-table-column 中如何用el-toolip ，el-table-column 中的内容溢出隐藏
12-08
可以在el-table-column中使用show-overflow-tooltip属性来实现内容溢出时的隐藏和显示tooltip。具体实现方法如下所示： ```html <el-table-column label="xxxx" prop="xx" min-width="110" show-overflow-tooltip> <template slot-scope="scope"> <div>{{ scope.row.xx }}</div> </template> </el-table-column> ``` 其中，show-overflow-tooltip属性用于控制是否显示tooltip，当内容溢出时，鼠标悬停在单元格上时会显示tooltip。 如果需要在点击按钮时隐藏列，可以使用v-if指令来控制列的显示与隐藏。具体实现方法如下所示： ```html <el-table-column v-if="showColumn" label="xxxx" prop="xx" min-width="110" show-overflow-tooltip> <template slot-scope="scope"> <div>{{ scope.row.xx }}</div> </template> </el-table-column> ``` 其中，showColumn是一个data属性，用于控制列的显示与隐藏。当showColumn为true时，列会显示；当showColumn为false时，列会隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Neo_LJH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值