前言

好久没写博客了，之前说好的每日一更，现在已经快一个月了，还是人太懒了吧，终于找到工作了，在公司实习搞前端开发，具体是什么公司就不说了。为了实习工作这将近一个月左右时间，出来找出租房又是整学校的材料啥的，耽误太多时间了，学校也还有个项目没搞完。实惨T^T. 好了也不废话了，既然能找到这篇博客，说明你也遇到了相同的问题，说不定可以在我这里找到解决方法，下面就看看我的方法吧，虽然不是最好的办法，但是对我来说能解决问题就行，哈哈哈。

一、问题描述

在公司开发中碰到一个问题，是关于表格展示，由于一个单元格中文字较多，设置宽度后会导致其文字多行显示，撑开其一行的高度，产品希望能将文字在一行内进行显示，因为文字内容不是必要信息，可以进行缩略展示，放在上面可以查看全部内容就行，这样就能使高度控制在一行，element本身自带一个表格属性show-overflow-tooltip，添加这个属性会使其所在列的文字内容进行缩略展示并且鼠标经过可以弹出全部内容。如下图所示：

一般来说，问题到这里基本就解决了，但是我做的表格要缩略的文字是内嵌的内容，使用了插槽自定义了表格中的内容，还有一些自定义的功能需要完成，设置show-overflow-tooltip属性后生效了，也一行展示了，但是超出的文字部分并没有显示省略号，经过我的仔细查找发现如果使用slot-scope，在列下面如果又嵌套元素，会导致该show-overflow-tooltip属性不会自动截断文字并展示省略号（…），接下来问题复现：

正常情况

代码：

<el-table:data="[{ col1: 1, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },{ col1: 2, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },{ col1: 3, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' }]"borderstripe><el-table-column prop="col1" label="列1" width="70" /><el-table-columnprop="col2"label="列2"width="70"show-overflow-tooltip/></el-table>

遇到的问题（问题复现）

代码：

<el-table:data="[{ col1: 1, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },{ col1: 2, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },{ col1: 3, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' }]"borderstripe><el-table-column prop="col1" label="列1" width="70" /><el-table-column prop="col2" label="列2" width="70" show-overflow-tooltip><template slot-scope="scope"><el-link type="primary">{{ scope.row.col2 }}</el-link></template></el-table-column></el-table>

可以看到上面同样设置了属性，但是在插槽内如果又添加新的元素会导致缩略的文字省略号无法实现，只要在el-table中使用插槽并且添加新的元素，就会导致show-overflow-tooltip属性的效果没有完全实现。

二、解决办法

先附上一张解决后的效果。

解决问题代码：

<el-table:data="[{ col1: 1, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },{ col1: 2, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },{ col1: 3, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' }]"borderstripe><el-table-column prop="col1" label="列1" width="70" /><el-table-column prop="col2" label="列2" width="70" show-overflow-tooltip><template slot-scope="scope"><atype="primary"style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #409eff;">{{ scope.row.col2 }}</a></template></el-table-column></el-table>

问题解决了，但是还是有些许瑕疵，比如省略号颜色，本人暂时没有找到解决办法，还有就是原本element-ui封装的组件有许多样式都是封装好的不易更改，所以这里直接使用a标签来替代el-link，然后写上文字缩略的css样式来实现效果，这里样式没有指定宽度，是因为可以从父元素也就是el-table-column继承宽度，所以没有设定宽度。而且这个也像一个补丁主要是表格单元格如果内嵌元素不会缩略截断文字并显示省略号，这里我手动补上这个缺陷，其他的效果还是依赖于element官方show-overflow-tooltip这个属性来实现，当然也可以自己实现，但是那样就复杂化了。

总结

以上代码是从项目问题中抽出来的一个demo，实际项目中可能要根据自己的需求去更改一些地方，但是主要解决方法还是一样，在我解决这个问题的地方，是进行了element-ui表格的二次封装，这个缩略属性是作为表头数据传入的，所以在封装的插槽中，我将css部分单独抽出一个类，然后根据传入的缩略属性再去进一步的决定显示样式，并且这个缩略样式要根据自己的需求去完成，总之根据自己想要的显示效果进行修改就行了。

—— 2020.12.16 摸鱼工作记录

今日份励志语句：

优秀的程序员像一名艺术家，每行代码都是反复斟酌后的艺术品。

vue中el-table插槽内容使用show-overflow-tooltip属性无法显示省略号问题-附解决方法相关推荐

【Popover 弹出框】在vue中，ElmentUI下Popover 弹出框组件 “ 自定义样式修改不了 ” 的解决方法
通过 /deep/ 深层查找并不能找到相关的元素,查找原因发现此组件的样式是全局样式,如果你style中加了scoped,如<style lang="scss" scoped ...
Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
关于vue中Cannot read property 'length' of undefined 导致：数据不显示问题【自己经验参考】
关于vue中Cannot read property 'length' of undefined 导致:数据不显示问题导致:数据不能及时,或者不渲染的问题? 项目备忘: 经过排查,发现是自己代码中忽 ...
html图片在wps中不显示文字大小,WPS文字插入图片显示不全怎么办 WPS文字插入图片显示不完整的解决方法...
在wps文字编辑文档时,如果我们在使用时插入图片显示不全,这种情况我们该怎么解决呢?想必有不少的用户遇到过这种问题,下面教程之家网为大家带来WPS文字插入图片显示不完整的解决方法,不知道怎么解决的朋友 ...
终端服务器安全层在协议流中检测到错误,并已取消客户端连接。客户端IP:x.x.x.解决方法
终端服务器安全层在协议流中检测到错误,并已取消客户端连接.客户端IP:x.x.x.解决方法事件类型: 错误事件来源: TermDD 描述: RDP 的 "DATA ENCRYPTION& ...
VS2008中的“解决方案配置”和“解决方案平台”不见了（Release和Debug）的解决方法...
VS2008中的"解决方案配置"和"解决方案平台"不见了(Release和Debug)的解决方法 1.视图->工具栏->自定义中->命令,选 ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
c++中调用python脚本提示 error LNK2001: 无法解析的外部符号 __imp_Py_Initialize等错误的解决方法
c++中调用python脚本提示 error LNK2001: 无法解析的外部符号 __imp_Py_Initialize等错误的解决方法时间:2017-05-09 12:32:06阅读:234评论 ...
mysql安装服务和安装中常见问题install/Remove of the Service Denied与net start mysql服务启动失败解决方法
mysql安装服务和安装中常见问题install/Remove of the Service Denied与net start mysql服务启动失败解决方法参考文章: (1)mysql安装服务和安 ...

vue中el-table插槽内容使用show-overflow-tooltip属性无法显示省略号问题-附解决方法

文章目录

前言

一、问题描述

二、解决办法

总结

vue中el-table插槽内容使用show-overflow-tooltip属性无法显示省略号问题-附解决方法相关推荐

最新文章

热门文章