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;
}
1
2
3
4

然而并没有什么效果。。。

---

原因分析：

起初以为是无法定位到元素，通过tr|td添加border|background测试检查都可以，给td添加box-shadow也完全没问题，就是tr的box-shadow没效果。。。/(ㄒoㄒ)/~~

通过查找资料，box-shadow对display:table-row元素是不起作用的

尝试：
设计效果还是得实现的，本来想：既然不让我给tr添加阴影，那就给td加阴影实现效果。
结果发现：td的四条边都有阴影，tr整行会出现一块一块的，根本不是理想中的悬浮效果。而且查看了下box-shadow值的设置，在上下都有阴影的情况下，左右两边阴影是无法隐藏的，至少都要漏一条左右边

box-shadow:{内阴影|外阴影,X轴偏移,Y轴偏移,阴影大小,阴影面积,阴影颜色}
1

---

解决方案：

①那么如何给el-table行添加阴影呢？既然没有直接的添加方式，那就采用间接的方法。在这里，我通过伪元素来模拟tr阴影效果
②但是，这个方法有好处也有弊端

一、css设置

.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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

附加解释：
①、运用子绝父相，既可以继承tr的宽高，又可以方便定位
②、content:" ";，必须写（注意" "中间是空格），否则after元素无法渲染
③、left:0;，因为after默认渲染在tr末尾之后，left:0;会将after覆盖在tr上

二、弊端
给el-table行加阴影的问题算是解决了，但是却导致表格内容无法操作（如果表格内没有按钮、超长显示之类的需求，以下内容就不需要看了）

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

三、弊端解决

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

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

需要将内容用template重新包装
html:

<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>
1
2
3
4
5
6
7

附加解释：
①、:show-overflow-tooltip="true"，如果el-table内td的内容超长，则显示英文省略号，并且鼠标移入该单元格弹出气泡，气泡中显示单元格内容；
②、tooltip-effect="light"，设置弹出气泡的风格，默认dark(黑色气泡)。这里设置light会将气泡背景变为白色
③、如果el-table-column内用到