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

背景描述

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

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

相关推荐
Bruce_Liuxiaowei32 分钟前
构建macOS命令速查手册:基于Flask的轻量级Web应用实践
前端·macos·flask
Python私教1 小时前
安装electron项目是为什么要执行postinstall script
前端·javascript·electron
shmily_yyA1 小时前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手1 小时前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
了不起的码农1 小时前
ES6对函数参数的新设计
前端·ecmascript·es6
XH2762 小时前
Android 通知用法详解
前端
陈随易2 小时前
盘点23个Nodejs的替代品Bun的实用功能
前端·后端·程序员
uhakadotcom2 小时前
兄弟们,炸裂了!llama 4发布了!又有哪些创业公司被颠覆了?
前端·算法·面试
uhakadotcom2 小时前
EventEmitter3:高性能事件发射器的使用与优势
前端·javascript·面试
XH2762 小时前
Android Bitmap.createBitmap() 用法全解析
前端·设计