vue 实现表格单选

要实现表格单选，可以通过以下步骤：

1. 在表格中添加一个单选列，可以使用 `<el-table-column>` 组件实现。

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <!-- 添加单选列 -->
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </el-table>
</template>

2. 在 `handleSelectionChange` 方法中处理单选事件，将选中的行对象保存到 `selectedRow` 变量中。

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ],
      selectedRow: null // 保存选中的行对象
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 判断是否有选中的行
      if (selection && selection.length > 0) {
        this.selectedRow = selection[0]; // 保存选中的行对象
      } else {
        this.selectedRow = null; // 没有选中的行，清空选中的行对象
      }
    }
  }
};

3. 使用 `:row-class-name` 属性为选中的行添加样式。

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    :row-class-name="rowClassName"
  >
    <!-- 添加单选列 -->
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </el-table>
</template>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ],
      selectedRow: null // 保存选中的行对象
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 判断是否有选中的行
      if (selection && selection.length > 0) {
        this.selectedRow = selection[0]; // 保存选中的行对象
      } else {
        this.selectedRow = null; // 没有选中的行，清空选中的行对象
      }
    },
    rowClassName(row) {
      // 如果选中的行对象与当前行对象相同，添加样式
      if (this.selectedRow && row === this.selectedRow) {
        return 'row-selected';
      }
      return '';
    }
  }
};

4. 添加样式。

.row-selected {
  background-color: #f5f7fa;
}

这样就完成了表格单选的实现。