el-table组件多选实现单选功能

在 Element UI 的 el-table 组件中，如果要实现单选功能，即使表格的 type 属性设置为 'selection' 以启用多选模式，我们也可以通过监听 select 和 select-all 事件，并在事件处理器中控制只选择一个选项来模拟单选效果。

以下是一个基本示例：

<template>
  <el-table :data="tableData" @select="handleSelect" ref="table">
    <el-table-column type="index"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <!-- 添加选择列 -->
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 假设这是你的表格数据...
      ],
      selectedRow: null, // 记录当前选中的行
    };
  },
  methods: {
    handleSelect(selection, row) {
      if (this.selectedRow) {
        this.$refs.table.toggleRowSelection(this.selectedRow, false); // 取消之前的选择
      }
      this.selectedRow = row; // 更新当前选中的行
    },
  },
};
</script>

在这个示例中，当用户点击某一行的选择框时，首先会取消之前选中的行（如果有），然后将当前点击的行记录为选中的行。这样就实现了在多选表格中只能选中一行的效果。