change获取当前值

@change="(val) => handleStatusChange(val, row)"

和其他写法的区别与原理，搞懂之后你就能灵活使用了。

---

🔍 @change="(val) => handleStatusChange(val, row)" 是什么？

这是给 @change 绑定一个箭头函数，它接收 el-switch 组件触发的参数 val（也就是切换后的状态 true/false），然后调用你自己的 handleStatusChange 方法，并额外传入 row。

所以这个写法等价于：

function onSwitchChange(val) {
  handleStatusChange(val, row)
}

这可以确保你同时拿到新状态 val 和当前行数据 row。

---

🚫 如果你只写：@change="handleStatusChange(row)"

这会在点击时触发 handleStatusChange(row)，但不会拿到 val（切换后的值），所以你在方法里无法直接知道状态变成了什么。

而且这写法等于提前把 row 绑定死了，el-switch 其实会传一个参数进去，但你方法只写了 row，就不会捕获它。

---

✅ 推荐写法：箭头函数接收 val

@change="(val) => handleStatusChange(val, row)"

这样你可以在方法里这么用：

const handleStatusChange = (newStatus, row) => {
  // newStatus 就是 true/false
  console.log('切换后的值:', newStatus);
  console.log('当前行数据:', row);
}

---

🧠 小知识：Element Plus 的 @change

• el-switch 的 @change 默认只传一个参数：切换后的值（布尔类型）。
• 所以你需要用箭头函数来手动组合更多数据一起传进去（比如 row）。

---

✅ 总结

写法	能拿到新状态？	能拿到 row？	推荐
@change="handleStatusChange(row)"	❌（拿不到）	✅	❌
@change="(val) => handleStatusChange(val, row)"	✅	✅	✅ 强烈推荐

---

如果你有很多行、很多状态开关，这种箭头函数写法是最清晰、最靠谱的。

需要我把它封装得更优雅一点，或者加入 loading、节流控制，也可以说 👌

评论