Element UI 的el-table点击获取当前tr

在 Element UI 的 <el-table> 组件中，如果你想要监听整个行（<tr>）的点击事件，你通常会使用 @row-click 事件。这个事件会在用户点击表格的某一行时触发，并且会传递给你三个参数：

row：当前行的数据（row）

column：当前行的 DOM 元素（rowElement，但在某些版本的 Element UI 中可能不直接提供 DOM 元素，而是提供了行的索引或其他信息，具体取决于你使用的 Element UI 版本）

event：当前点击dom元素

<template>  
  <el-table  
    :data="tableData"  
    @row-click="handleRowClick"  
    style="width: 100%">  
    <el-table-column  
      prop="date"  
      label="日期"  
      width="180">  
    </el-table-column>  
    <el-table-column  
      prop="name"  
      label="姓名"  
      width="180">  
    </el-table-column>  
    <!-- 其他列定义 -->  
  </el-table>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [{  
        date: '2016-05-02',  
        name: '王小虎',  
        // 其他数据...  
      }, // ...更多数据  
      ]  
    }  
  },  
  methods: {
    /**
     *
     * @param row 当前row
     * @param column 当前纵队信息
     * @param event 当前点击dom
     */
    handleRowClick(row, column, event) {
     //被点击的行的索引
      const index = this.allUserData.findIndex(
        (item) => item.userId === row.userId
      );
      //点击的tr元素
      const tr = document.querySelectorAll(`.${column.id}`)[index]
        .parentElement;
      // 使用getBoundingClientRect()获取元素相对于视口的位置
      const rect = tr.getBoundingClientRect();
      const { top, left } = rect;
      this.location = {
        left,
        top,
      };
      // 注意：在某些版本的 Element UI 中，`column` 和 `event` 可能不会作为参数传递  
      // 如果你的版本中没有 `event`，你可能需要在自定义列模板中使用 `@click`  
      console.log('你点击了行：', row);  
  
      // 如果你需要鼠标位置，你可能需要这样做（但这通常不是 @row-click 的用例）：  
      // 1. 在自定义列模板中使用 `@click`  
      // 2. 或者，如果你只是想知道行被点击了，上面的代码就足够了  
    }, 
  }  
}  
</script>