vxe-table实现可取消单选行的解决方案

1. 项目背景与需求解析

在Web前端开发中，表格组件是数据展示和交互的核心控件之一。vxe-table作为一款基于Vue的高性能表格库，因其丰富的功能和灵活的配置受到开发者青睐。在实际业务场景中，单选表格的需求非常普遍，但官方默认的单选行为存在一个痛点：一旦选中某行后，无法通过再次点击取消选中状态。

这个限制在真实业务中会带来诸多不便。比如在一个订单管理系统中，管理员需要临时取消已选中的订单进行其他操作；或者在数据对比场景中，用户可能需要反复切换选中状态。传统的解决方案往往需要绕道而行，比如添加一个"取消选择"按钮，但这破坏了直接点击的操作直觉。

2. 技术实现方案

2.1 vxe-table单选机制分析

vxe-table通过highlight-current-row属性开启行高亮（视觉上的单选效果），配合current-change事件实现单选逻辑。但核心问题在于其内部维护的currentRow状态变量会在重复点击时被重新赋值，而不是置空。

查看源码可以发现，在packages/table/src/table.js中处理点击事件时，无论当前行是否已被选中，都会触发setCurrentRow方法：

javascript复制// 简化后的源码逻辑
handleRowClick(row) {
  if (this.highlightCurrentRow) {
    this.setCurrentRow(row)
  }
  // 其他处理...
}

2.2 解决方案设计

要实现允许取消选中的功能，我们需要在点击已选中行时拦截默认行为。方案核心在于：

1. 维护一个外部状态变量存储当前选中行
2. 在current-change事件中实现自定义逻辑
3. 通过ref获取表格实例手动控制选中状态

具体实现代码结构：

javascript复制<template>
  <vxe-table
    ref="tableRef"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <!-- 列定义 -->
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      currentRow: null,
      tableData: [...]
    }
  },
  methods: {
    handleCurrentChange({ row }) {
      if (this.currentRow === row) {
        this.$refs.tableRef.setCurrent