当前位置：首页 > article >正文

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

article 2024/9/22 14:40:13

<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;
  },

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

查看全文

http://www.kler.cn/news/284325.html