element-plus中的el-switch踩坑记录

最开始我的写法是:

<template #default="{ row }">
                    <el-switch
                        @change="(res) => {suspendOrStartChange(res, row);}"
                        :value="row.state"
                        :active-value="1"
                        :inactive-value="0"
                        :disabled="(scope.row.adStatus != '审核通过' &&
                 scope.row.adStatus != '暂停' &&
                  scope.row.adStatus != '投放中')">
                    </el-switch>
</template>

出现问题：

1. 开关无法正确显示,全为关闭状态

2. 导致每次加载数据 change 事件自动触发

然后这么尝试就解决了

<template #default="{ row }">
                    <el-switch
                        @change="(res) => {suspendOrStartChange(res, row);}"
                        v-model="row.state"
                        :active-value="1"
                        :inactive-value="0"
                        :disabled="(scope.row.adStatus != '审核通过' &&
                 scope.row.adStatus != '暂停' &&
                  scope.row.adStatus != '投放中')">
                    </el-switch>
</template>

各种尝试发现上面的写法在vue2是没问题的，vue3的话将“:value”改为"v-model" 一切问题都解决了