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)

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

相关推荐
纸飞机的旅行6 分钟前
如何快速使用Cesium完成项目
vue.js·webgis
小呆i8 分钟前
Vue生成名片二维码带logo并支持下载
前端·javascript·vue.js
tian-ming1 小时前
(五)Web前端开发进阶2——AJAX
前端
盒马盒马1 小时前
Ajax:跨域 & JSONP
前端·ajax
QEasyCloud20221 小时前
简道云和企业微信数据同步集成案例
java·大数据·前端
friend_ship1 小时前
Vue3.0都有哪些新特性及优化点
vue.js·vite·vue3.0·es6新特性·proxy响应式对象
Cwhat1 小时前
通过自定义指令实现图片懒加载
前端·javascript·vue.js
WindrunnerMax1 小时前
Canvas简历编辑器-选中绘制与拖拽多选交互设计
前端·javascript·编辑器
小彭努力中2 小时前
102. 管道漫游案例
前端·3d·webgl
小彭努力中2 小时前
107. 阴影范围.shadow.camera
前端·深度学习·3d·webgl