Element ui el-table合并行懸停效果自定義
本文探討如何自定義Element UI el-table組件中合并行的懸停效果。 用戶希望實現兩種不同的懸停行為：
-
單行高亮 (右側或整行): 鼠標懸停在合并行的任意一行時，僅高亮顯示合并行的右側部分，或者高亮顯示合并行的所有行。
-
整行組高亮: 鼠標懸停在合并行的任意一行時，高亮顯示合并行的所有行。
實現方案
可以通過結合css樣式和JavaScript邏輯來實現上述效果。 以下提供一種實現方法，需要根據具體需求調整css選擇器和JavaScript代碼。
方法一： 單行高亮 (示例：右側高亮)
這種方法需要在CSS中針對合并行添加懸停樣式。 由于具體實現依賴于你的html結構和合并行的CSS類名，這里提供一個示例：
.el-table__row--merged { /* 替換為你的合并行類名 */ /* ...其他樣式... */ } .el-table__row--merged:hover { background-color: #f5f5f5; /* 修改為你的高亮顏色 */ } .el-table__cell:last-child.el-table__row--merged:hover { /* 只高亮最后一列 */ background-color: #f5f5f5; }
方法二： 整行組高亮
這種方法需要使用JavaScript監聽鼠標懸停事件，并動態修改合并行組的樣式。 你需要找到合并行組的共同標識符（例如，相同的 row-key 或自定義屬性）。
// 假設你的表格數據是tableData，并且每一行都有一個唯一的id const table = this.$refs.table; // 獲取el-table實例 table.$el.addEventListener('mouseover', (event) => { if (event.target.classList.contains('el-table__row')) { // 檢查是否懸停在行上 const row = event.target; const rowId = row.dataset.rowId; // 獲取行ID // 找到所有屬于同一合并行組的行，并添加高亮樣式 table.$el.querySelectorAll('.el-table__row[data-row-id^="' + rowId.split('-')[0] + '"]').forEach(el => { el.classList.add('highlight'); }); } }); table.$el.addEventListener('mouseout', (event) => { if (event.target.classList.contains('el-table__row')) { const row = event.target; const rowId = row.dataset.rowId; table.$el.querySelectorAll('.el-table__row[data-row-id^="' + rowId.split('-')[0] + '"]').forEach(el => { el.classList.remove('highlight'); }); } });
然后在你的CSS中添加 highlight 類：
.highlight { background-color: #FFFF00; /* 修改為你的高亮顏色 */ }
注意: 以上代碼僅為示例，你需要根據你的實際代碼結構和數據進行調整。 data-row-id 是一個假設的屬性，你需要替換成你實際使用的屬性或方法來標識合并行組。 rowId.split(‘-‘)[0] 假設你的 rowId 使用 – 分隔合并行組ID和行內ID。
通過調整CSS選擇器和JavaScript事件監聽器，你可以靈活地控制el-table合并行的懸停效果，滿足不同的設計需求。 記住要根據你的實際HTML結構和數據進行修改。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
