问题背景
项目列表页面,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>
小提醒
注意:
- 如果el-switch组件是使用v-model绑定的表格数据,那么你回调函数中的参数其实是改变完的状态值,所以如果改变状态失败后还需手动恢复列表数据,否则视图层会被改变。
- 如果使用model-value绑定则回调函数中的参数是未改变的状态值,状态失败后也不需要去恢复列表数据。
总结
开发问题小记录,希望能够帮助到遇到同样问题的小伙伴,如果有更好的解决方案欢迎评论留言,有问题欢迎指正。