【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号_el-table-column超出隐藏

font-size: 16px;
}

// 固定列表身
tbody .el-table-fixed-column–right {
background-color: #072d48 !important;
}

**原图：固定列样式与自定义的el-table整体样式不一致**


![](https://img-blog.csdnimg.cn/c618134b438c4870ba99cb14a8908f42.png)


 **效果图**


![](https://img-blog.csdnimg.cn/349d1416f59d4426af8c95f804764edd.png)


### 三、表头内容超出部分隐藏


        el-table表身内容可以通过show-overflow-tooltip属性，快捷设置内容超出部分隐藏，但表头部分则需要利用插槽手动判断内容长度，是否显示省略号及tooltip。


        首先需要设置el-table-column的min-width属性。然后通过header插槽查找DOM判断宽度动态展示el-tooltip


Vue2参考代码：

onMouseOver(refName) {
let parentWidth = this.refs[refName][0].parentNode.offsetWidth;letcontentWidth=this.refs[refName][0].parentNode.offsetWidth; let contentWidth = this.