vue el-table通过复选框获取id值

在Vue.js中，`el-table`是一个表格组件，如果你想要通过复选框获取每个行的ID值，你可以这样做：

首先，在`<el-table>`组件内，你需要添加一个`selection`属性来启用选择功能，例如：

<el-table :data="tableData" selection="multiple">
  <!-- ... -->
  <el-table-column type="selection"></el-table-column>
  <!-- ... -->
</el-table>

然后，你可以在数据数组`tableData`中包含一个`key`字段，通常可以设置为`id`，以便在获取选定行时识别它们。

接下来，在模板中添加一个列来显示复选框和展示ID，比如：

<template>
  <el-table-column label="操作">
    <template slot-scope="{ row }">
      <el-checkbox v-model="selectedIds.includes(row.id)" @change="handleCheckboxChange(row.id)"></el-checkbox>
      <span> ID: {{ row.id }}</span>
    </template>
  </el-table-column>
</template>

最后，创建处理复选框变化的函数`handleCheckboxChange`，它会更新`selectedIds`数组，并记录当前被选中的行ID：

<script>
export default {
  data() {
    return {
      tableData: [], // 假设这是你的表格数据
      selectedIds: [] // 用于存储选中的行ID
    };
  },
  methods: {
    handleCheckboxChange(id) {
      if (this.selectedIds.includes(id)) {
        this.selectedIds.splice(this.selectedIds.indexOf(id), 1);
      } else {
        this.selectedIds.push(id);
      }
    }
  }
};
</script>

现在当你勾选或取消勾选某一行的复选框时，`selectedIds`数组就会相应地增加或删除对应的ID值。