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

猫猫村晨总2024-10-17 7:00

背景描述

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

代码实现

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

typescript 复制代码

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

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

typescript 复制代码

// 判断鼠标是否在可选区域内
const isInSelectableArea = event => {
   const target = event.target
   // 查找最近的表头元素(th或thead)
   const headerElement = target.closest('th, thead')

   // 如果目标元素位于表头中，返回false
   if (headerElement) return false

   const headerSelect = document.querySelector('.table-con')
   if (!headerSelect) return false

   const 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)

注

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