element plus table 多选 如何只选中一条

Element Plus 是 Vue 3 中的一个 UI 组件库，它对 Element UI 进行了现代化和扩展。在 Element Plus 的 Table 组件中，实现单条或多条选择通常通过 `row-class-name` 或者 `selectable` 属性来控制。

如果你想要实现单选功能，可以设置 `selectable` 为 "single"，这样每次只能选中一行：

<template>
  <el-table :data="tableData" :selectable="selectMode === 'single'">
    <!-- ... -->
    <el-table-column type="selection" />
    <!-- ...其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      selectMode: 'single', // 可选值：'none' (禁用选择), 'single' (单选), 'multiple' (多选)
      tableData: [], // 表格数据
    };
  },
  methods: {
    handleSelectChange(rows) {
      this.selectedRow = rows.length ? rows[0] : null; // 当有选中时，更新selectedRow
    },
  },
};
</script>

在 `handleSelectChange` 方法中，当你切换选中的行时，可以根据 `rows` 数组判断是否只有一条记录，并更新相应的状态。