Element-plus 虚拟表格 绑定单元行的双击事件、单击事件 （Vue3、Nuxt3）

更新：

其实是有提供的，只是官网文档给的描述太隐蔽了，我没看出来是啥意思。。。

element-plus 虚拟化表格如何自定义事件_会做饭的二哈的博客-CSDN博客

 传入一个对象，里面的属性是原生DOM事件，比如onClick等

下面的可以不用看了，是一些DOM操作，因为我不知道官方提供了这些。。。

———————————————————————————————————————————

一、引言

        由于做的内容需要渲染大量数据，用原本的表格渲染会十分卡顿，所以选择使用虚拟化表格，官方文档：Virtualized Table 虚拟化表格 | Element Plus (element-plus.org)

        但是由于这个表格还是beta版，所以提供的事件也非常少，如下：

         我做的项目需要实现表格的单击、双击单元行，来进行操作这一行的数据，但是翻阅文档并没有找到这个事件，那么只能自己实现了。

二、代码

        话不多说，直接上代码 （基于Nuxt3，比普通的Vue3多嵌套了一层client-only组件，删掉就行。除此之外，Nuxt3会自动帮忙引入vue中的函数，所以vue3的小伙伴需要你自己去引入一些组件和函数）

        下面的代码实现了，双击获取当前单元行在数组中的索引，并根据索引获取该单元行的数据

        所用技术：nuxt3 / vue3 、 Element-plus 、tsx / jsx、原生js事件

三、原理

1. 关于 jsx / tsx 可以去了解相关文档，这里用的挺多，也可以看上一篇文章 在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽）_l煎饼果子的博客-CSDN博客

2. 想获取点击/双击的单元行的数据，那么我们可以通过获取这个单元行的索引，进而获取数据。那么怎么获得索引呢？我这边是通过 给列表中每一项都添加一个_index 数据，用于存放索引，并且在页面中用dom渲染出索引。然后根据双击/点击事件的事件对象e，获取点击的元素，然后不断向上寻找父元素，直到找到当前的单元行的dom元素。然后获取当前单元行的存放索引的元素，根据innerHTML提取出索引。 （这里为了页面美观，把索引display: none;了，你可以根据需要显示）

四、结语

        本代码有很多缺点，但是也基本实现了需求。如果大家有更好的方法请告诉我，我也很需要

        下面讲一下存在的缺点，首先是多次使用了 indexOf 函数，可能存在性能问题 + 不美观，同时我做的错误判断没有包括所有情况，如果大家在使用过程中发现了bug，需要进行排除

        这种获取dom对象的做法，肯定是不如组件直接对外暴露一个方法的，但是我也没办法了，希望element官方在未来能暴露出表格行的双击/单击事件吧

        tip: 除此之外，还可以在每一个columns单元格的渲染函数中，给元素直接绑定事件。但是缺点就是，有几个表头，就要绑定几次事件，可能还会影响其它元素的事件。