vue table表格单选

在 Vue 中实现表格单选的方法有很多种，以下是一种较为简单的实现方法：

1. 在表格的数据源中添加一个选中属性，用于标记该行是否被选中。

2. 在表格中添加一个单选框列，使用 v-model 绑定选中属性。

3. 在单选框列的头部添加一个全选框，用于全选/取消全选。

4. 使用 computed 计算属性，获取选中的行数据。

下面是示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="allSelected"></th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td><input type="checkbox" v-model="item.selected"></td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男', selected: false },
        { name: '李四', age: 22, gender: '女', selected: false },
        { name: '王五', age: 24, gender: '男', selected: false },
        { name: '赵六', age: 26, gender: '女', selected: false },
      ],
      allSelected: false,
    };
  },
  computed: {
    selectedData() {
      return this.tableData.filter(item => item.selected);
    },
  },
  watch: {
    allSelected(val) {
      this.tableData.forEach(item => {
        item.selected = val;
      });
    },
  },
};
</script>

上述代码中，`tableData` 是表格的数据源，其中每一行数据都有一个 `selected` 属性，用于标记该行是否被选中。`allSelected` 是全选框的选中状态，使用 watch 监听其变化，并将表格中每一行的选中状态与其同步。`selectedData` 是计算属性，用于获取选中的行数据。