在Vue中使用Element UI的表格组件时，通过点击表格的某一行来获取该行数据的id

在Vue中使用Element UI的表格组件时，如果想通过点击表格的某一行来获取该行数据的

id

，可以使用

@row-click

事件监听器。这个事件监听器会在你点击表格的某一行时被触发，并且会提供一个参数

row

，这个

row

就是你点击的那一行的数据对象。

首先，确保你的

<el-table>

组件上添加了

@row-click

事件监听器，并绑定一个方法来处理这个事件。然后，在这个方法中，你可以通过

row

参数访问到当前行的所有数据，包括

id

。

下面是一个示例代码，展示了如何实现这个功能：

<template>  
  <div class="content">  
    <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">  
      <el-table-column prop="date" label="Date" width="180" />  
      <el-table-column prop="name" label="Name" width="180" />  
      <el-table-column prop="address" label="Address" />  
    </el-table>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const tableData = ref([  
      {  
        date: '2016-05-03',  
        name: 'Tom',  
        address: 'No. 189, Grove St, Los Angeles',  
        id: 1,  
      },  
      // 其他数据...  
    ]);  
  
    // 处理行点击事件的方法  
    const handleRowClick = (row, column, event) => {  
      console.log(row.id); // 这里可以访问到当前行的id  
      // 你可以在这里根据row.id进行其他操作  
    };  
  
    return {  
      tableData,  
      handleRowClick,  
    };  
  },  
};  
</script>

在上面的代码中，

<el-table>

组件通过

@row-click

绑定了

handleRowClick

方法。当表格的某一行被点击时，

handleRowClick

方法会被调用，并且会接收到三个参数：

row

（当前行的数据对象）、

column

（当前点击的列对象，如果需要的话）、

event

（原生的DOM事件对象）。在这个例子中，我们主要使用

row

参数来获取当前行的

id

。

Table 表格 | Element Plus (element-plus.org)