問題:

在el-table每一行獲得焦點(diǎn)與鼠標(biāo)經(jīng)過時(shí)，顯示一個(gè)整行的陰影懸浮效果

/*其中，table-row-checkd是我自定義的焦點(diǎn)行添加類名，大家可以自己起名*/
.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行加陰影的問題算是解決了，但是卻導(dǎo)致表格內(nèi)容無法操作

1、通常，項(xiàng)目設(shè)計(jì)中，el-table會(huì)帶一些按鈕，比如刪除、編輯某行數(shù)據(jù)等要求。由于after將tr覆蓋，這些按鈕也會(huì)被覆蓋
2、如果用到show-overflow-tooltip這個(gè)屬性，同以上原理也會(huì)被遮擋操作

弊端解決
1、2解決：
對于需要點(diǎn)擊等操作的列，就不能按以下這樣的普通方式了：

<el-table-column prop="loginDate" label="登錄時(shí)間"></el-table-column>

需要將內(nèi)容用template重新包裝

<el-table :row-class-name="rowChecked" @row-click="getRow" tooltip-effect="light">
<el-table-column label="登錄時(shí)間" :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內(nèi)td的內(nèi)容超長，則顯示英文省略號，并且鼠標(biāo)移入該單元格彈出氣泡，氣泡中顯示單元格內(nèi)容；
②、tooltip-effect="light"，設(shè)置彈出氣泡的風(fēng)格，默認(rèn)dark(黑色氣泡)。這里設(shè)置light會(huì)將氣泡背景變?yōu)榘咨?br> ③、如果el-table-column內(nèi)用到<template v-slot=scope>，并在template中處理數(shù)據(jù)，那么在<el-table-column>標(biāo)簽內(nèi)寫不寫prop都不會(huì)有影響

.edit-tr{
	position:relative;/*重點(diǎn)*/
	z-index:2;/*重點(diǎn)*/
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}

優(yōu)化：
每行左右兩邊的陰影被遮擋，畢竟tr有tbody\table等父元素，被遮擋沒有直接的解決辦法。

但是，由于新添加的偽元素使用定位，實(shí)現(xiàn)左右陰影是可以的。
以下重寫對新增after的樣式

.el-table tbody tr.table-row-checked::after,.el-table tbody tr:hover::after{
	position:absolute;
	content:" ";
	width:calc(100% - 6px);/*改動(dòng)處*/
	height:100%;
	left:3px;/*改動(dòng)處*/
	background:transparent;
	box-shadow:0 3px 10px 1px rgba(0,0,0,0.1);
}

解釋：
將after寬度預(yù)留出左+右陰影區(qū)域?qū)挾?，并向左偏移一點(diǎn)距離，這樣就能將原先遮擋的左右陰影顯示出來（設(shè)計(jì)圖對el-table行左右兩端無border情況下效果更佳）
建議：
我的項(xiàng)目中，對tr上下有border，左右無border，本來想把上下的陰影也放到tr內(nèi)，但發(fā)現(xiàn)上下在border影響下視覺會(huì)有一種上下內(nèi)陰影的效果，所以after的高度還采用和tr高度一致，僅對左右進(jìn)行處理。
如果你的tr上下左右都有border，這種情況下，四邊做內(nèi)陰影突出焦點(diǎn)行是一種不錯(cuò)的選擇。

參考：

el-table行添加陰影懸浮效果文章來源地址http://www.zghlxwxcb.cn/news/detail-765847.html

到了這里，關(guān)于[element-ui] el-table行添加陰影懸浮效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！