[element-ui] el-table行添加阴影悬浮效果

问题:

在el-table每一行获得焦点与鼠标经过时，显示一个整行的阴影悬浮效果

/*其中，table-row-checkd是我自定义的焦点行添加类名，大家可以自己起名*/
.el-table tbody tr:hover,.el-table tbody tr.table-row-checked{
	box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.06)!important;
}

没有什么效果
原因: box-shadow对display:table-row元素是不起作用的

解决方案：

.el-table tbody tr.table-row-checked,.el-table tbody tr:hover{
	position:relative;
	background:#fff;
}
.el-table tbody tr.table-row-checked::after,.el-table tbody tr:hover::after{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	left:0;
	background:transparent;
	box-shadow:0 3px 10px 1px rgba(0,0,0,0.1);
}

弊端
给el-table行加阴影的问题算是解决了，但是却导致表格内容无法操作

1、通常，项目设计中，el-table会带一些按钮，比如删除、编辑某行数据等要求。由于after将tr覆盖，这些按钮也会被覆盖
2、如果用到show-overflow-tooltip这个属性，同以上原理也会被遮挡操作

弊端解决
1、2解决：
对于需要点击等操作的列，就不能按以下这样的普通方式了：

<el-table-column prop="loginDate" label="登录时间"></el-table-column>

需要将内容用template重新包装

<el-table :row-class-name="rowChecked" @row-click="getRow" tooltip-effect="light">
<el-table-column label="登录时间" :show-overflow-tooltip="true">
	<template v-slot="scope">
		<span class="edit-tr" @click="toUserDetail(scope.row)">{{scope.row.loginDate}}</span>
	</template>
</el-table-column>
</el-table>

附加解释：
①、:show-overflow-tooltip="true"，如果el-table内td的内容超长，则显示英文省略号，并且鼠标移入该单元格弹出气泡，气泡中显示单元格内容；
②、tooltip-effect="light"，设置弹出气泡的风格，默认dark(黑色气泡)。这里设置light会将气泡背景变为白色
③、如果el-table-column内用到<template v-slot=scope>，并在template中处理数据，那么在<el-table-column>标签内写不写prop都不会有影响

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

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

但是，由于新添加的伪元素使用定位，实现左右阴影是可以的。
以下重写对新增after的样式

.el-table tbody 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 10px 1px rgba(0,0,0,0.1);
}

解释：
将after宽度预留出左+右阴影区域宽度，并向左偏移一点距离，这样就能将原先遮挡的左右阴影显示出来（设计图对el-table行左右两端无border情况下效果更佳）
建议：
我的项目中，对tr上下有border，左右无border，本来想把上下的阴影也放到tr内，但发现上下在border影响下视觉会有一种上下内阴影的效果，所以after的高度还采用和tr高度一致，仅对左右进行处理。
如果你的tr上下左右都有border，这种情况下，四边做内阴影突出焦点行是一种不错的选择。

参考：

el-table行添加阴影悬浮效果文章来源地址https://www.toymoban.com/news/detail-765847.html

到了这里，关于[element-ui] el-table行添加阴影悬浮效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！