问题背景

项目列表页面，el-table组件中利用插槽嵌入了el-switch组件，当更新列表数据后会自动触发开关组件的chang事件。问题示例代码如下

# table-com 为自定义组件不用在意
<table-com
    ref="nodeTableCom"
    v-loading="loading"
    :tableColumns="tableConfig"
    :tableData="tableData"
    @tableBtn="handleTableRow"
 >
    <template #status="{ row }">
      <el-switch
        @change="statusHandle(row)"
        :active-value="true"
        :inactive-value="false"
        v-model="row.status"
       />
    </template>
 </table-com>

分析问题

查看了element plus官方文档，该组件提供的API只有change事件，找了很多贴字说可以将change事件替换为before-change事件，但是并没有解决我的问题，想了解更多组件内容点击这里https://element-plus.org/zh-CN/component/switch.html#apihttps://element-plus.org/zh-CN/component/switch.html#api

解决方案

自己决定使用原生事件去解决这个问题，不使用组件提供的changeAPI，给组件绑定click事件，这样就能完美的解决这个问题。

<template #status="{ row }">
    <el-switch
        @click="statusHandle(row)"
        :active-value="true"
        :inactive-value="false"
        v-model="row.status"
    />
</template>
<script setup>
const statusHandle = (row) => {
    const { status } = row
    // 改变状态接口
    const payload = {
        ...入参
    }
    statusApi(payload).then(res => {

    }).catch(err => {
        // 状态更新失败恢复列表状态
        row.status = !status
    })
}
</script>

 小提醒

注意：

1. 如果el-switch组件是使用v-model绑定的表格数据，那么你回调函数中的参数其实是改变完的状态值，所以如果改变状态失败后还需手动恢复列表数据，否则视图层会被改变。
2. 如果使用model-value绑定则回调函数中的参数是未改变的状态值，状态失败后也不需要去恢复列表数据。

总结

开发问题小记录，希望能够帮助到遇到同样问题的小伙伴，如果有更好的解决方案欢迎评论留言，有问题欢迎指正。