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

最新推荐文章于 2024-08-30 18:32:08 发布

码路老默007

最新推荐文章于 2024-08-30 18:32:08 发布

阅读量95

点赞数

分类专栏：工作文章标签： ui safari vue.js

本文链接：https://blog.csdn.net/2201_75705263/article/details/141721679

版权

工作专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<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 {}
    }
}

也就是minWidth,maxWidth兼容safari.

还有一种方法就是在源码中进行改，但是不建议使用

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);
 
    // (修改后)过滤非法值 null
    const validArr = widthArr.filter(item => item)
    return validArr.length ? validArr.reduce((acc, width) => acc + width, -1) : null;
  },

更新包的时候就给搞没了，不建议使用