Element UI 的 ＜el-table＞ 组件中选择框如何只能选择一个

在 Element UI 的 <el-table> 组件中，@selection-change 事件通常用于处理表格中选择框的状态变化。如果希望在表格中只能选择一个选项，可以通过以下方法实现：

1. 使用 @selection-change 事件：在事件处理函数中确保用户只能选择一个选项。

2. 设置选择模式：Element UI 表格的选择模式有两种：单选和多选。为了实现单选，你可以使用 type="selection" 属性配合 @selection-change。

以下是一个示例，展示了如何确保用户只能选择一个选项：

示例代码

<template>
  <el-table
    ref="renewalTable"
    :data="renewalData"
    border
    style="width: 100%; margin-top: 15px;"
    @selection-change="handleSelectionChange"
    :header-cell-style="{ background: '#F9FAFC', color: 'black' }"
    class="xw-publabel renewalTable"
    :row-key="rowKey"
  >
    <el-table-column
      type="selection"
      width="55"
      :selectable="selectable"
    ></el-table-column>
    <!-- 其他列 -->
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      renewalData: [
        // 示例数据
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Tom', age: 40 }
      ],
      selectedRows: [],
    };
  },
  methods: {
    handleSelectionChange(selectedRows) {
      if (selectedRows.length > 1) {
        // 只保留最新选择的项
        this.$refs.renewalTable.clearSelection();
        this.$refs.renewalTable.toggleRowSelection(selectedRows[selectedRows.length - 1]);
      }
      // 记录选择的行
      this.selectedRows = selectedRows;
      console.log('Selected rows:', this.selectedRows);
    },
    selectable(row, index) {
      // 可根据需求调整选中状态
      return true;
    },
    rowKey(row){
      return row.id
    }
  }
};
</script>

解释

1. @selection-change 事件处理函数：

   • 在 handleSelectionChange 方法中，我们检查 selectedRows 数组的长度。如果长度大于 1，清除当前选择并只保留最后一个选中的项。

2. 清除选择：

   • this.$refs.renewalTable.clearSelection() 用于清除所有选择。
   • this.$refs.renewalTable.toggleRowSelection() 用于重新选择最后一个选中的行。

3. row-key 属性：

   • row-key 确保每一行有唯一标识符，有助于维护正确的选择状态。

4. selectable 属性：

   • 可选属性用于控制是否可以选择行。此处返回 true 允许所有行被选择。

使用这种方式，可以确保用户在表格中只能选择一个选项。如果你需要进一步调整或优化，根据你的具体需求修改 handleSelectionChange 方法即可。