2、如果用到show-overflow-tooltip这个属性同以上原理也会被遮挡操作

弊端解决

:show-overflow-tooltiptruetemplate

v-slotscopespan

clicktoUserDetail(scope.row){{scope.row.loginDate}}/span/template

/el-table-column

①、:show-overflow-tooltiptrue如果el-table内td的内容超长则显示英文省略号并且鼠标移入该单元格弹出气泡气泡中显示单元格内容

②、tooltip-effectlight设置弹出气泡的风格默认dark(黑色气泡)。

这里设置light会将气泡背景变为白色

v-slotscope并在template中处理数据那么在el-table-column标签内写不写prop都不会有影响

.edit-tr{position:relative;/*重点*/z-index:2;/*重点*/width:100%;overflow:hidden;text-overflow:ellipsis;

每行左右两边的阴影被遮挡毕竟tr有tbody\table等父元素被遮挡没有直接的解决办法。

.el-table

tr.table-row-checked::after,.el-table

tbody

tr:hover::after{position:absolute;content:

;width:calc(100%

6px);/*改动处*/height:100%;left:3px;/*改动处*/background:transparent;box-shadow:0

3px

将after宽度预留出左右阴影区域宽度并向左偏移一点距离这样就能将原先遮挡的左右阴影显示出来设计图对el-table行左右两端无border情况下效果更佳

我的项目中对tr上下有border左右无border本来想把上下的阴影也放到tr内但发现上下在border影响下视觉会有一种上下内阴影的效果所以after的高度还采用和tr高度一致仅对左右进行处理。

如果你的tr上下左右都有border这种情况下四边做内阴影突出焦点行是一种不错的选择。

el-table行添加阴影悬浮效果