vue表格勾选单行数据

可以使用 Vue 的 v-model 绑定表格的选中状态。例如：

<template>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td><input type="checkbox" v-model="item.checked"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 18, checked: false },
        { id: 2, name: 'Bob', age: 20, checked: false },
        { id: 3, name: 'Charlie', age: 22, checked: false },
      ],
    };
  },
};
</script>

这里的 list 数组中包含了每行需要展示的数据，其中每个对象都有一个 checked 属性，代表当前行是否被选中。在模板中，我们使用 v-for 指令遍历 list 数组，为每个表格行绑定了一个单选框（checkbox）以及它对应的数据对象的 checked 属性。这样当用户勾选了某个单选框时，对应的数据对象的 checked 属性也会被更新，从而实现了表格行选中状态的管理。