el-switch 开关设置失败状态不变

最新推荐文章于 2024-07-15 17:15:41 发布

陳那个陈

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量1.1k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_52164116/article/details/126341608

版权

页面：

页面代码：

         <el-table-column
                fixed="right"
                prop="carousel"
                label="设置展演轮播图"
                width="160px"
                v-if="rolesrow == 'ADMIN' || rolesrow == 'ADMINISTRATOR'"
            >
                <template
                    slot-scope="scope"
                    v-if="
                        scope.row.activityType == 1 &&
                            scope.row.auditStatus == 3
                    "
                >
                    <span :class="scope.row.carousel ? '' : 'free-active'"
                        >否</span
                    >
                    <el-switch
                        active-color="#67C23A"
                        inactive-color="#F56C6C"
                        :inactive-value="0"
                        :active-value="1"
                        v-model="scope.row.carousel"
                        @change="
                            handleFreeChangeYs(
                                scope.row.activityId,
                                scope.row.carousel,
                                scope.row,
                                scope.$index
                            )
                        "
                    ></el-switch>
                    <span :class="scope.row.carousel ? 'free-active' : ''"
                        >是</span
                    >
                </template>
            </el-table-column>

调用接口：

//点击开关触发的change事件并携带参数
 handleFreeChangeYs(activityId, status, row, index) {
            (接口和传参)
                .then(res => {
                    //接口调用成功改变状态
                    if (res.data.status == "success") {
                        if (status != 0) {
                            alertMessage(
                                this,
                                "【" + row.activityName + "】设置成功",
                                "success"
                            );
                        } else {
                            alertMessage(
                                this,
                                "【" + row.activityName + "】取消成功",
                                "success"
                            );
                        }
                    //接口调用失败，状态不变并提示错误
                    } else {
                        let newData = row;
                        newData.carousel = newData.carousel === 0 ? "1" : "0";
                        this.activityDatas[index] = newData;
                        alertMessage(this, res.data.message, "error");
                        return false;
                    }
                });
        },