实用指南：Vue3 + Element Plus 表格复选框踩坑记录

在开发能耗对比功能时,遇到了几个 Element Plus 表格复选框的典型问题。本文记录了问题现象、排查思路和解决方案,希望能帮助到遇到类似问题的开发者。

问题背景

在使用 Element Plus 的 el-table 组件实现多选功能时,遇到了以下几个问题:

1. ❌ 点击单个复选框后,表格所有行都被选中
2. ❌ 取消所有勾选后,图表仍然显示旧数据
3. ❌ 点击"已勾选"筛选复选框后,选中状态丢失

问题一:点击单个复选框导致全选

问题现象

用户点击表格中某一行的复选框,期望只选中该行,但实际上所有行的复选框都被勾选了。不过图表数据显示是正确的(只有一行)。

排查过程

通过添加调试日志,发现:

const selectionChange = (val) => {console.log("selectionChange 触发", val.length, "条数据");console.log("选中的数据:", val.map(item => ({ refId: item.refId, name: item.name })));console.log("表格数据:", tableData.value.map(item => ({ refId: item.refId, name: item.name })));
}
// 输出:
// selectionChange 触发 1 条数据
// 选中的数据: [{refId: undefined, name: '测试1'}]
// 表格数据: [
//   {refId: undefined, name: '测试1'},
//   {refId: undefined, name: '测试2'},
//   {refId: undefined, name: '测试3'}
// ]

关键发现: 所有数据的 id 都是 undefined!

根本原因

表格配置了 row-key="id":

但后端返回的数据中没有 id 字段,导致:

• Element Plus 无法区分不同的行
• 表格认为所有行的 row-key 都相同(都是 undefined)
• 所以选中一行时,所有"相同"的行都被标记为选中

解决方案

检查后端返回的数据结构,发现真正的唯一标识字段是 refId:

// 数据结构
{refId: "4028976a9b8be45e019b8cc45aa00007",name: "测试1",// ...其他字段
}

将 row-key 改为正确的字段: