解决Element-ui中Table表格里的show-overflow-tooltip不兼容safari浏览器问题。

在使用element-ui过程中，需求：“列表中，文本内容过多，以划入显示全部内容展示”，查看UI库，el-table提供了show-overflow-tooltip属性，但是在测试的过程中，使用safari浏览器时，这个属性不生效,解决思路：

方法一：修改源码【不提倡，更新element时，都会覆盖掉】

文件路径：node_modules/element-ui/packages/table/src/table-body.js

getColspanRealWidth(columns, colspan, index) {if (colspan < 1) {return columns[index].realWidth;}const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);// (修改前)存在widthArr => null// return widthArr.reduce((acc, width) => acc + width, -1);// (修改后)过滤非法值 nullconst validArr = widthArr.filter(item => item)return validArr.length ? validArr.reduce((acc, width) => acc + width, -1) : null;},

方法二：查看element-ui中的table提供了cell-style属性

<el-table :cell-style="getCellStyle">
....
</el-table>methods:{getCellStyle({column}){//TODO 针对Safari表格width与showOverflowTooltip暂不能共存异常const tempWidth = column.realWidth || column.width if(column.showOVerflowTooltip) {return {minWidth:tempWidth + 'px',maxWidth:tempWidth + 'px'}}return {}}
}

解决Element-ui中Table表格里的show-overflow-tooltip不兼容safari浏览器问题。相关推荐

解决Element Plus 中el-table表格在一些浏览器中不对齐的问题
解决Element Plus 中el-table表格在一些浏览器中不对齐的问题 #### 问题今天在测试项目时候,意外的发现项目在360浏览器中Element Plus 中el-table表格不 ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
html中table表格里的内容如何居中
1.table表格整个居中 <div style="text-align: center;"> <table border="1" style ...
Element ui中table标签上下滚动时表格错位
在style中加 /deep/.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 20px; }
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...

解决Element-ui中Table表格里的show-overflow-tooltip不兼容safari浏览器问题。

解决Element-ui中Table表格里的show-overflow-tooltip不兼容safari浏览器问题。相关推荐

最新文章

热门文章