先说结论：vxe-table 的单选，默认只能在多行之间切换，不支持点击已选中行把选中状态取消。翻遍radio-config的配置项，也找不到一个类似allow-cancel的开关。所以想实现“单选允许取消选中”，必须自己在事件层补充逻辑。

这个需求真实又常见。我在做一个任务分派后台时遇到过：表格里列了一批待分派的工单，操作员点击某一行选中它，点“分派”按钮提交。结果用户反馈说，每次手滑点错行后只能再点另一行，要是列表里只有一行，或者选错了想回到“未选择”状态，根本做不到。产品经理画了个草图，要求在单选图标上再点一次能够取消勾选，就像 checkbox 那样。

vxe-table 不是做不到，只是默认行为没开放这个交互。这篇文章就把方案选型、完整代码、回显时机、分页处理、踩坑细节一次讲清楚。

1. 需求还原：单选模式下为什么需要“取消选中”

1.1 管理后台里的经典交互场景

单选表格在后端管理界面太常见了：从列表里挑一条数据去编辑、去分派、去审核，或者在下拉列表界面里选一项配置。大多数场景确实只需要“互斥选中”，但有一类业务场景存在第三态：选了，但后来不想要了。

我那次做的功能是“把工作任务分派给指定成员”。列表中每行代表一个成员，操作员点某一行选中他，再点“分派”。如果点错了，希望再点一次同一个成员，就取消分派对象；或者点“清空”按钮也能回到未选择状态。这种需求在查询筛选类页面更明显：用户可能临时勾选一条记录用于过滤，但过滤完想恢复“全部”。

本质上是把“单选”从二态变成了三态：未选择 / 已选择 / 已选择但可放弃。而 vxe-table 默认只实现了前两态之间的切换，第三态得靠开发者补。

1.2 单选不是“唯一选中”那么简单

很多人第一次接触 vxe-table 的单选，以为单选就是给表格加一列type="radio"的列，然后数据自己会跟着变。实际上 vxe-table 的单选逻辑是这么跑的：

• 点击未选中行 A，内部先把之前选中的行 B 取消，再把 A 设为选中；
• 点击已选中行 A，内部判定状态没有变化，不触发任何切换；
• radio-change事件只在选中状态发生改变时触发，点击同一行不会触发。

所以，如果你只是监听radio-change，永远等不到“取消选中”的那一下。搞清楚这个底层行为，后面的方案才能落地。

2. 方案选型：两条实现路线，我为什么推荐 radio 组件

2.1 路线一：radio 列 + radio-config

这是 vxe-table 最标准的单选实现方式。模板加一列：

<vxe-column type="radio" title="选择" width="60"></vxe-column>

再在表格上配radio-config：

<vxe-table ref="xTable" :data="tableData" :radio-config="{ trigger: 'row', highlight: true }" >

trigger: 'row'表示点击整行都会触发选中，不用精确点那颗小圆点；highlight: true表示选中行带高亮背景。这条路线有明确的单选图标，用户一眼能看出“现在选中了哪一行”，交互反馈最清晰。

2.2 路线二：行高亮 highlight-current-row

另一种常见做法是不用 radio 列，而是用行高亮：

<vxe-table ref="xTable" :data="tableData" highlight-current-row @current-change="onCurrentChange" >

表格会默认高亮当前行，方法setCurrentRow(row)和clearCurrentRow()可以在实例上调用。这种方案没有单选图标，视觉上更轻，但问题在于“当前行”和“选中行”的概念容易混淆：键盘上下键移动、某些单元格点击也会改变当前行，用户未必知道当前高亮到底是不是业务上的“选中”。

2.3 对比表格

我在项目里最终选了 radio 列方案。理由只有一个：业务方要求“可选、可取消、可清空”，radio 图标天然传递“选中了哪个”，配合“再点一次取消”的交互，用户理解成本最低。高亮方案也不是不能用，只是后续要在current-change里拦截方向键带来的干扰，容易写出边界问题。

3. 核心实现：让单选允许取消选中的两种写法

3.1 写法 A：row-click + getRadioRow 判断（推荐）

最稳妥的思路不是监听radio-change，而是监听row-click。点击一行时，判断“这一行是不是当前已经选中的 radio 行”。如果是，就调用clearRadioRow()清空；如果不是，交给组件自身完成切换。

完整示范：

<template> <div> <vxe-table ref="xTable" :data="tableData" :radio-config="{ trigger: 'row', highlight: true }" @row-click="onRowClick" > <vxe-column type="radio" title="选择" width="60"></vxe-column> <vxe-column field="name" title="成员"></vxe-column> <vxe-column field="dept" title="部门"></vxe-column> </vxe-table> <button type="button" @click="handleConfirm">确认分派</button> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '张三', dept: '研发组' }, { id: 2, name: '李四', dept: '测试组' }, { id: 3, name: '王五', dept: '运维组' } ] } }, methods: { onRowClick({ row }) { const $table = this.$refs.xTable const currentRow = $table.getRadioRow() // 点击的恰好是当前已选中行，则取消选中 if (currentRow && currentRow === row) { $table.clearRadioRow() } }, handleConfirm() { const row = this.$refs.xTable.getRadioRow() if (!row) { alert('请先选择一名成员') return } // 提交 row.id console.log('selected id:', row.id) } } } </script>

这段逻辑简单直接：getRadioRow()返回当前选中的整行对象，没有选中时返回null；clearRadioRow()清空 radio 选中状态。因为只处理“点已选中行”这一种情况，不用记忆上一行是谁，代码可复用性很强。

3.2 写法 B：radio-change + lastRow 记忆

如果你已经在项目里用了大量radio-change事件，不想再额外挂row-click，可以用“记忆上一行”的方式：

<template> <vxe-table ref="xTable" :data="tableData" :radio-config="{ trigger: 'row', highlight: true }" @radio-change="onRadioChange" > <vxe-column type="radio" title="选择" width="60"></vxe-column> <vxe-column field="name" title="成员"></vxe-column> </vxe-table> </template> <script> export default { data() { return { tableData: [], lastRadioRow: null } }, methods: { onRadioChange({ row }) { const $table = this.$refs.xTable // 如果当前点击行就是上一次选中的行，说明用户想取消 if (this.lastRadioRow && this.lastRadioRow === row) { $table.clearRadioRow() this.lastRadioRow = null return } this.lastRadioRow = row } } } </script>

这段代码有个容易踩的坑：clearRadioRow()有可能再次触发radio-change事件，导致回调重新进入，lastRadioRow被错误地恢复。第一次写这套逻辑的人是很容易栽在这里的。规避办法是加一个取消后的防抖锁：

onRadioChange({ row }) { if (this._clearingFlag) { this._clearingFlag = false return } const $table = this.$refs.xTable if (this.lastRadioRow && this.lastRadioRow === row) { this._clearingFlag = true $table.clearRadioRow() this.lastRadioRow = null return } this.lastRadioRow = row }

对比两种写法，我更推荐row-click。理由不是“代码少”，而是它不依赖事件是否二次触发、回调顺序如何，判断依据始终是“当前实际选中行是谁”，可靠性更高。

3.3 参数选择说明：trigger 与 highlight

radio-config里有两个参数和取消选中强相关：

• trigger：可选default和row。设为row后，点击行内任意位置都会触发选中切换，否则必须点眼图标。做“允许取消选中”的交互时建议开row，否则用户习惯点整行，失败后会认为功能坏了。
• highlight：选中行的背景色。取消选中后组件会自动移除高亮，但如果你同时用了自定义row-class-name去控制背景色，两者可能冲突，后面会讲。

另外提醒一点：不要在同一张表里同时使用 radio 列和highlight-current-row。或者，可以只在 radio 的highlight基础上再叠加自定义样式。两个选中体系混在一起，视觉上会出现“两个高亮”，取值时也不知道该用哪个方法，排查起来很费劲。

4. 实操演示：从零到可取消选中的单选表格

4.1 基础模板与必选项

打开一个 Vue 2 + vxe-table 的项目，直接在页面里写：

<template> <div class="page-wrap"> <vxe-table ref="selectTable" :data="tableData" :radio-config="{ trigger: 'row', highlight: true }" :loading="loading" height="400" @row-click="onRowClick" > <vxe-column type="radio" title="选择" width="60"></vxe-column> <vxe-column field="code" title="编号" width="100"></vxe-column> <vxe-column field="name" title="名称" min-width="140"></vxe-column> <vxe-column field="status" title="状态" width="100"></vxe-column> <vxe-column field="updateTime" title="更新时间" width="180"></vxe-column> </vxe-table> <div class="footer-bar"> <span class="tip"> 当前选中： <template v-if="selectedRow">{{ selectedRow.name }}</template> <template v-else>未选择</template> </span> <button type="button" @click="handleClear">清空选择</button> <button type="button" class="primary" @click="handleSubmit">提交</button> </div> </div> </template>

脚本部分：

export default { data() { return { loading: false, tableData: [], selectedRow: null } }, created() { this.fetchList() }, methods: { async fetchList() { this.loading = true // 模拟接口返回 setTimeout(() => { this.tableData = [ { id: 1, code: 'SG-1001', name: '服务器巡检', status: '待处理', updateTime: '2024-06-01 10:00' }, { id: 2, code: 'SG-1002', name: '数据库备份', status: '待处理', updateTime: '2024-06-01 10:10' }, { id: 3, code: 'SG-1003', name: '日志清理', status: '处理中', updateTime: '2024-06-01 10:15' } ] this.loading = false }, 300) }, onRowClick({ row }) { const $table = this.$refs.selectTable const currentRow = $table.getRadioRow() if (currentRow && currentRow === row) { $table.clearRadioRow() this.selectedRow = null } else { this.selectedRow = row } }, handleClear() { this.$refs.selectTable.clearRadioRow() this.selectedRow = null }, handleSubmit() { const row = this.$refs.selectTable.getRadioRow() if (!row) { alert('请先选择一条记录') return } console.log('提交的数据：', row) } } }

这里把选中的 row 同步到了selectedRow，方便在表格下方实时展示当前选中项。注意：点击新行时radio-change会触发，但row-click也会触发，所以onRowClick里需要同时处理“选中新行”和“取消旧行”两种情况。上面的代码把selectedRow的更新写进了onRowClick，逻辑是自洽的。

4.2 回显与初始化选中

编辑场景里，经常需要进页面后直接把某一行设为选中。比如工单回显、成员预选。

methods: { initSelected(selectedId) { this.$nextTick(() => { const row = this.tableData.find(item => item.id === selectedId) if (row) { this.$refs.selectTable.setRadioRow(row) this.selectedRow = row } else { // 当前页没有对应数据，可能是跨页回显 this.$refs.selectTable.clearRadioRow() } }) } }

为什么必须包$nextTick？因为 vxe-table 的数据渲染是异步的，接口把tableData填进去之后，表格内部的 row 对象还没建好，立刻调用setRadioRow(row)会找不到对应行，导致回显失败。这是新手最容易遇到的“明明数据有，但就是选不中”的问题。

跨页回显更麻烦：如果目标行不在当前页，直接setRadioRow(row)会找不到对象。常见处理方案有两种：一是跳转到目标行所在页后再回显；二是用一个全局selectedRowId记录，用户翻页后检测到当前页包含该 id 时再回显。第二种体验更好，实现也不复杂：

watch: { tableData: { handler(newData) { if (!this.selectedRowId || !newData.length) return const row = newData.find(item => item.id === this.selectedRowId) if (row) { this.$nextTick(() => { this.$refs.selectTable.setRadioRow(row) }) } }, immediate: true } }

4.3 提交保存时如何取到“未选中”状态

保存时不要用selectedRow这个数据属性判断，直接用表格实例取：

handleSubmit() { const row = this.$refs.selectTable.getRadioRow() if (!row) { // 走入这里说明用户已经取消了选中，属于未选择状态 this.$message.warning('请选择一条记录') return } // 正常提交 }

用selectedRow得自己维护同步，一旦清理逻辑漏了一处，就会出现“按钮显示已选择，实际提交 null”的 bug。实例方法永远是最权威的，页面上的展示状态只是辅助。

5. 常见问题与排查技巧实录

5.1 点击同一行没有取消成功

先检查是否真的调用了clearRadioRow()。常见原因是ref写错，比如模板里ref="selectTable"，代码里写的this.$refs.xTable，调用永远找不到实例。建议在方法第一行打印this.$refs.selectTable确认。

另一个原因是事件挂错了：如果在radio-change里做取消，会出现事件循环问题；如果在row-click里做，但表格设置了trigger: 'default'，那么用户点击行内空白处时不会选中，自然也不会触发你的取消判断。这时候把trigger改成row即可。

5.2 清除选中后行背景色没恢复

如果你只用了radio-config.highlight，其实clearRadioRow()会自动移除高亮。出现“没恢复”通常是因为自己又加了row-class-name：

:row-class-name="rowClassName"

rowClassName({ row }) { if (this.selectedRow && this.selectedRow === row) { return 'row-selected' } }

自定义 class 的优先级和组件高亮叠加，clearRadioRow()只清理内部状态，不会清掉你的自定义类。解决方式是：用响应式selectedRow控制自定义类，清理时一并置空。

5.3 分页、搜索后选中状态错乱

vxe-table 的 radio 状态默认绑定在当前渲染的数据行上。切换页码后，原本选中的行可能已经不在表格里，但实例内部还保留着引用。再点新行时可能会出现“明明应该选中 A，结果 B 还残留在样式里”的错觉。

处理策略是明确业务预期：

• 不保留跨页选中：在分页、搜索前调用clearRadioRow()；
• 保留跨页选中：记录selectedRowId，在tableData变化后按 4.2 的 watch 逻辑回显。

我一般推荐不保留，理由很简单：用户跨页后看不到之前选中的数据，提交时却带着一条不可见的记录，很容易引发投诉。如果有跨页勾选需求，建议换 checkbox 方案。

5.4 与表格编辑、校验的联动冲突

如果你的表格是edit-config可编辑模式，点击单元格进入编辑时也会触发row-click，这可能把用户刚选中的行取消掉。比如编辑完一个输入框，点击同一行的另一个单元格，编辑器还没关闭，clearRadioRow()却已经执行了。

这属于误触场景。处理方式是在row-click里做前置判断：

onRowClick({ row }) { // 如果当前处于编辑状态，不处理取消逻辑 if (this.$refs.selectTable.isActiveByRow(row)) { return } // 原有取消逻辑 }

不同版本的 vxe-table 判断方法名略有差异，也可以换成this.$refs.selectTable.getEditRow()是否存在来判断。

5.5 问题排查速查表

6. 容易被忽略的细节与我的使用建议

6.1 键盘操作与无障碍场景

vxe-table 支持键盘上下键移动当前行，但 radio 选中不会跟随键盘改变。我发现很多做表单系统的同学会忽略这个细节：鼠标操作时“取消选中”没问题，键盘用户却只能永远固定第一条，很不友好。

如果项目有键盘操作要求，建议同时监听表格键盘事件，在方向键移动时同步更新选中状态，并且在取消逻辑里开放让键盘也能触发。没有明确要求的，至少要在文档里说明：本表格单选建议使用鼠标操作。

6.2 固定列、多级表头下的表现

固定列开启后，radio 列会在固定区域和滚动区域各渲染一份 DOM。getRadioRow()取的是数据行引用，不会因为固定列复制产生重复，但你写自定义 class 或样式时要注意：两个区域的单元格都会应用row-class-name，视觉上没问题，排查时别以为出现了“两个选中行”。

多级表头对取消选中逻辑没有影响，radio 列在嵌套表头里也能正常使用。唯一要注意的是列宽别设太小，否则小圆点会被压缩得很难点中，用户体验会明显下降。

6.3 为什么官方默认不放开“取消选中”

回想我自己第一次做这个需求时，也在想：vxe-table 为什么不直接提供一个内置配置？后来想明白了。单选可取消意味着“选中值”从一行变成了一行或 null，业务层所有读取选中的地方都要做空值判断。默认开放这个行为，表格库只负责界面，但使用者的业务代码会平白多出一堆边界处理；不开，则保持了“单选永远是单选”的简单语义。

理解了这一点，开发者就可以根据业务需要决定是否放开。内部工具、配置页、表单回显建议放开，操作更灵活；财务报表、数据提交页，保持默认不可取消反而更安全，避免用户漏选提交后找不到原因。

6.4 最后一个小技巧

除了“点击已选中行取消”之外，最好再提供一个显式的“清空选择”入口，比如表格右上角一个小按钮，或者底部状态栏里的“取消选择”。我在项目里发现，用户第一次点击已选中行时，并不知道这能取消，大多是误打误撞发现的；有了明确按钮，功能可发现性会提升一个台阶。

配套代码很简单：

handleClear() { const $table = this.$refs.xTable $table.clearRadioRow() this.selectedRow = null }

两个入口共用同一段清理逻辑，维护成本几乎为零。

这几段经验是我实际改造 vxe-table 单选时一点点试出来的。最初我也在radio-change事件里折腾，被二次触发的问题绊了一跤，后来改成row-click方案，代码一下子清爽了，再没出过状态残留的问题。如果你现在正被“单选无法取消”卡住，不用犹豫，直接上 3.1 的写法，再按项目情况补上回显和分页策略，基本就能交付了。