Vue 3 中 Element Plus Table（表格）点击获取对应 id

在Vue 3中，使用Element Plus创建一个表格并获取行点击的对应id，可以通过以下步骤实现：

1. 安装并引入Element Plus：

npm install element-plus --save

2. 在Vue组件中引入ElTable、ElTableColumn和ElButton组件。
3. 使用ElTable组件渲染表格，并使用@row-click事件监听行点击。
4. 在事件处理函数中，你可以通过行数据获取对应的id。

下面是具体的代码示例：

<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <el-table-column prop="id" label="ID" width="100"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
 
const tableData = ref([
  { id: 1, name: 'John Doe', /* 其他数据 */ },
  { id: 2, name: 'Jane Smith', /* 其他数据 */ },
  // 其他行数据
]);
 
const handleRowClick = (row, column, event) => {
  console.log('Clicked row ID:', row.id);
  // 在这里可以执行其他逻辑，例如导航或者显示详情
};
</script>

在这个例子中，handleRowClick函数会在行被点击时被调用，并打印出被点击行的id。你可以在这个函数中添加你需要的任何逻辑，比如导航到详情页面或显示模态框等。