vue勾选获取单行id

要在Vue表格中勾选获取单行id，你可以在表格中添加一个复选框列，并将每行的数据与该复选框绑定。当用户勾选复选框时，你可以将该行数据的id添加到一个选中数据的数组中。以下是一个简单的示例：

1. 在表格模板中添加复选框列并绑定数据id：

<template>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td><input type="checkbox" v-model="item.checked" :value="item.id" @change="selectItem(item.id)"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

2. 在组件中添加选中数据的数组和勾选逻辑：

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 20, checked: false },
        { id: 2, name: 'Bob', age: 25, checked: false },
        { id: 3, name: 'Charlie', age: 30, checked: false },
      ],
      selectedIds: [],
    };
  },
  methods: {
    selectItem(id) {
      if (this.selectedIds.includes(id)) {
        this.selectedIds = this.selectedIds.filter((i) => i !== id);
      } else {
        this.selectedIds.push(id);
      }
    },
  },
};
</script>

3. 将勾选逻辑绑定到复选框的`v-model`和`@change`指令：

<input type="checkbox" v-model="item.checked" :value="item.id" @change="selectItem(item.id)">

现在，每次用户勾选或取消勾选一个复选框时，`selectItem`方法将会更新`selectedIds`数组，其中包含所有被选中的行数据的id。你可以在需要获取单行id的地方使用`selectedIds`数组，例如在点击某个操作按钮时，只操作选中的行数据。