el-table中实现可选表格区域的鼠标事件检测

背景描述

• vue3+element plus
• 想要实现el-table中特定区域内的单元格才可点击

代码实现

• 首先，需要给el-table绑定单元格点击事件

<el-table :data="currTableData"borderstyle="width: 100%;"height="calc(100vh - 400px)"@cell-click="handleCellClick"
>
...

• 在handleCellClick()方法中，调用鼠标事件检测的方法

// 判断鼠标是否在可选区域内
const isInSelectableArea = event => {const target = event.target// 查找最近的表头元素(th或thead)const headerElement = target.closest('th, thead')// 如果目标元素位于表头中，返回falseif (headerElement) return falseconst headerSelect = document.querySelector('.table-con')if (!headerSelect) return falseconst headerRect = headerSelect.getBoundingClientRect()const isInHeader = event.clientX >= headerRect.left &&event.clientX <= headerRect.right &&event.clientY >= headerRect.top &&event.clientY <= headerRect.bottom;const cell = target.closest('td, th')const columnIndex = cell ? cell.cellIndex : undefined;return isInHeader && columnIndex > 2; // 从第四列开始,这里根据需求修改，我是前三列不准点击
}

• 注意，这里作为参数的event,来自handleCellClick(row, column, cell, event)

注

这里方法的逻辑总体还是比较简单的，不过因为属于通用性比较强的方法，所以记录一下。