vxe-table复选框设置单选

### vxe-table 中实现复选框单选模式

为了在 `vxe-table` 组件中将默认的复选框行为改为单选模式，可以通过监听选择事件并控制已选项的数量来达到目的。具体来说，在每次点击复选框时取消之前的选择。

#### 实现方式：

通过自定义 `checkbox-config` 属性中的 `checkMethod` 函数以及利用 `@cell-click` 或者其他相关事件处理逻辑可以完成此功能[^1]。

下面是一个简单的例子展示了如何仅允许一次选择:

<template>
  <div>
    <!-- 表格 -->
    <vxe-table
      border
      ref="xTable"
      :data.sync="tableData"
      @checkbox-change="handleCheckboxChange">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>

    <!-- 显示当前选中项的信息 (可选)-->
    <p>Selected Row: {{ selectedRow }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 28 },
        { name: 'Jane', age: 25 }
      ],
      selectedRow: null, // 存储被选中的那一行数据
    };
  },
  methods: {
    handleCheckboxChange({ records }) {
      if (records.length > 0) {
        this.selectedRow = records[0];
        
        // 清除之前的勾选状态
        const $table = this.$refs.xTable;
        setTimeout(() => {
          $table.clearCheckboxRow();
          
          // 手动设置最新的一次选择
          $table.setCheckboxRow(this.selectedRow, true);
        }, 0);
      } else {
        this.selectedRow = null;
      }
    }
  }
};
</script>

在这个示例里，当用户尝试选择某一行时会触发 `handleCheckboxChange` 方法。如果已经有其他的行处于选定状态，则先清除所有的选择再单独设定新的选择。这样就实现了所谓的“单选”。