vue使用elementui出现表格内容过长问题

最新推荐文章于 2024-06-07 16:46:33 发布
最新推荐文章于 2024-06-07 16:46:33 发布
阅读量3.6k 收藏 5
点赞数 1
文章标签： elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58312555/article/details/125925077
版权

在使用elementUI的过程中，表格中内容如果过长便会自动换行，就容易出现不美观的问题

例如

在这里插入图片描述

解决方法

elementUI中有这么一个属性show-overflow-tooltip可以隐藏过长内容，并且当鼠标放上时进行显示

注意：show-overflow-tooltip虽然能够解决文本过长的显示问题，但是这相对于在每个单元格中都插入了tooltip组件，而tooltip组件会产生大量的DOM，如果大量使用show-overflow-tooltip就会影响页面加载的速度

<el-table-column
	prop="address"
	label="地址"
	:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
	prop="note"
	label="备注"
	:show-overflow-tooltip="true">
</el-table-column>

实现效果

在这里插入图片描述

m0_58312555
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue+element自定义表格遇到的问题
luckylqh的博客
05-19 1万+
使用vue+element实现了一个自定义的表格，需求如下：看似简单的功能实现起来有些细节真的不好处理1.点击编辑实现可编辑标题，这个地方纯粹用的js的DOM操作，官网上只提供了方法handleClick，但是没有举例具体怎么实现，用element的属性或者方法没有办法实现，所以只能操作dom，给展示标题的div添加contenteditable：true属性2.小数、排序、合计、启用这些列都是在...
Vue2.0+ElementUI实现表格翻页的实例
08-29
该实例提供了一个完整的 Vue2.0 和 ElementUI 实现表格翻页的解决方案，涵盖了数据存储、分页、表格渲染等多个方面的内容，对于学习 Vue2.0 和 ElementUI 的开发者具有很高的参考价值。 知识点： 1. ElementUI 的...
Vue 使用 Element UI表格组件 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容
weixin_48469176的博客
11-15 1493
Vue 使用 Element UI表格组件 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容
Vue：element-ui中表格过长内容隐藏显示
sssxlxwbwz的博客
08-13 1万+
element-ui中表格过长内容隐藏显示及复制
Vue element-ui中 table表格过长内容隐藏显示
最新发布
cdfdfgrd的博客
06-07 461
Vue element-ui中 table表格过长内容隐藏显示
vue项目中处理表格过长超出屏幕宽度有滚动问题
qq_43468165的博客
08-25 3345
项目使用了ant design vue ,在使用到表格时候出现表格内容过长问题，由于嵌套表格的容器使用card并没有给他固定宽度。所以要做一下监听解决表格过长但表格没有滚动而是屏幕滚动问题 解决代码 //html控制宽度部分写上 :style="'width:' + (fullWidth - 200) + 'px'" //js监听位置，注意钩子函数的使用，要mounted才有效。 mounted() { //监听屏幕宽度 const that = this; windo.
vue，el-table文字过长省略，修改点击显示后el-tooltip的样式
hhb442的博客
03-13 2241
在移动端，使用elementUI表格进行数据展示的时候，有时候有一些不是很关键的信息，不希望占据很多的板面信息。可以添加 min-width=“120” :show-overflow-tooltip=“true”2. 打开开发者工具查看 class 为 el-tooltip__popper。必需要在App.vue文件中修改该 class 的样式才行，在App.vue的。1.点击后会显示省略信息，若想修改显示信息的大小。3. 并发现 dom 位于全局app之外。这样会省略过长的信息。style标签中添加。
vue中table表格内容过长——显示省略号悬浮显示内容
热门推荐
weixin_44979432的博客
01-06 1万+
一、问题 1：vue中table表格单列内容文本过长，导致回行过多，撑大table表格过于难看。如图： 二、解决方法（三种） 解决效果图如下： 第一种：①在el-table上面增加代码tooltip-effect="dark"或者tooltip-effect=“light” <el-table :data="resultData" border tooltip-effect="dark" style="width:100%" :header-cell-style="
vue表格显示字符串过长的问题及解决
freefly828的博客
12-22 674
表格中有的字段内容太长，容易导致表格变形，影响阅读。解决思路，字段显示指定长度的内容，走出后加。，鼠标移动上去后显示字段的完整内容。加了v-if，避免该字段如果为空或者null的时候导致报错。
vue+elementUI实现表格关键字筛选高亮
12-29
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下 代码： <!-- 筛选 --> 筛选： 请输入关键字> <!--
对vue + elementUI的表格常规增删改查优化封装
03-29
对vue + elementUI的表格常规增删改查优化封装
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： ...
VUE3 element-ui table文字过长-进行省略溢出处理
m0_62017325的博客
12-21 1530
VUE3 element-ui table文字过长-进行省略溢出处理
vue(33) : 表格内容过长隐藏并悬浮展示
Lxinccode的博客
03-29 327
【代码】vue(33) : 表格内容过长隐藏并悬浮展示。
vue表格内容过长处理
qq_43621738的博客
07-22 4897
第一次写博客，可能写的不好，谨以此形式记录下我这个it菜菜的学习成长之路。 今天说一下vue表格的内容过长的处理。 vue表格内容过长 起初我想的是用原生的js给样式处理下就好了，可是审查元素发现element.style{}.在文件中并没有找到定义的此样式 。我在界面加调试代码element.style{white-space: nowrap; overflow: hidden;text-ov...
element 表格字段过长
盖世小可爱的博客
11-21 2330
表格字段过长
element ui表格内容过长省略显示，点击单元格展开全部内容
difend的博客
09-28 8269
element-ui表格内容过长用省略号省略过长的内容文本，通过点击单元格将该单元格完整的内容完整展示出来！
【vue】Element ui 表格的header 标题文字过于太长 而需要显示省略号并用tooltip显示全部信息
loyd3的博客
02-16 1909
上面代码中renderHeader方法里要注意column 包含的是每一行的内容，给header添加显示省略号的css代码，并且要把header的文字内容包含在el-tooltip里面。
vue-elementui中表格搜索
08-29
在Vue-ElementUI中实现表格搜索的方法有多种。根据引用中的内容，你可以使用自定义的computed属性来实现表格搜索功能。具体步骤如下： 1. 首先，你需要在你的Vue组件中添加一个搜索框用于输入关键字。 2. 然后，你可以在computed属性中创建一个新的属性，例如"tables"，用于存储过滤后的数据。 3. 在"tables"属性的定义中，你可以使用filter()方法对"tableData"进行过滤，只保留那些包含搜索关键字的数据。 4. 在filter()方法中，你可以使用Object.keys()方法获取对象数组的所有枚举属性，然后使用some()方法进行匹配判断，只要有一个属性匹配成功，就返回整个对象。 5. 在匹配时，你可以将对象属性的值转换成小写，并使用indexOf()方法来判断是否包含搜索关键字。 6. 最后，根据搜索框中是否有值，来返回过滤后的数据或者全部数据。 下面是一个示例代码供你参考： ```javascript computed: { tables() { let search = this.search.toLowerCase(); if (search) { return this.tableData.filter(data => { return Object.keys(data).some(key => { if (data[key !== null) { return data[key].toString().toLowerCase().indexOf(search) > -1; } }); }); } else { return this.tableData; } } } ``` 通过以上步骤，你就可以在Vue-ElementUI表格中实现搜索功能了。注意，其中的"tableData"是你需要展示在表格中的数据，"search"是搜索框中输入的关键字。你可以根据自己的实际情况进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue+element-ui的表格组件实现简单的搜索框功能](https://blog.csdn.net/kurodasense/article/details/122782200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue-elementui-tree-table.rar](https://download.csdn.net/download/qq_32442967/12015371)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值