【Vue】1.ElementUI中el-switch开关切换改变值遇到的问题

需求：在切换开关的时候给个提示，确定切换开关就改变值，取消就不改变开关值

刚开始代码是这样的：

<el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="ruleCode" label="规则编号" width="180"></el-table-column>
    <el-table-column prop="ruleDesc" label="规则描述"></el-table-column>
    <el-table-column prop="address" label="参数设定" width="100" align="center">
        <template slot-scope="scope" v-if="scope.row.address">
            <el-button @click="handleClickSheDing(scope.row)" type="text" size="small">设定</el-button>
        </template>
    </el-table-column>
    <el-table-column prop="uwCode" label="满足规则时的核保结论" width="180"></el-table-column>
    <el-table-column prop="reasonDesc" label="核保结论原因" width="180"></el-table-column>
    <el-table-column prop="times" label="数据获取频次" width="180"></el-table-column>
    <el-table-column prop="startDate" label="每月起始日" width="180"></el-table-column>
    <el-table-column prop="status" label="是否启用" width="100" align="center">
        <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#cccccc"
                @change="changeSwitch(scope.row, $event)"
                >
            </el-switch>
        </template>
    </el-table-column>
    <el-table-column prop="address9" label="操作" width="50" align="center">
        <template slot-scope="scope">
            <el-button @click="handleClickUpdate(scope.row)" type="text" size="small">修改</el-button>
        </template>
    </el-table-column>                
</el-table>

这样遇到的问题是：切换开关，el-switch会立即改变值，不会根据传入的值改变，因为v-model是双向绑定的

解决办法：把v-model换成:value

<el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="ruleCode" label="规则编号" width="180"></el-table-column>
    <el-table-column prop="ruleDesc" label="规则描述"></el-table-column>
    <el-table-column prop="address" label="参数设定" width="100" align="center">
        <template slot-scope="scope" v-if="scope.row.address">
            <el-button @click="handleClickSheDing(scope.row)" type="text" size="small">设定</el-button>
        </template>
    </el-table-column>
    <el-table-column prop="uwCode" label="满足规则时的核保结论" width="180"></el-table-column>
    <el-table-column prop="reasonDesc" label="核保结论原因" width="180"></el-table-column>
    <el-table-column prop="times" label="数据获取频次" width="180"></el-table-column>
    <el-table-column prop="startDate" label="每月起始日" width="180"></el-table-column>
    <el-table-column prop="status" label="是否启用" width="100" align="center">
        <template slot-scope="scope">
            <el-switch
                :value="scope.row.status"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#cccccc"
                @change="changeSwitch(scope.row, $event)"
                >
            </el-switch>
        </template>
    </el-table-column>
    <el-table-column prop="address9" label="操作" width="50" align="center">
        <template slot-scope="scope">
            <el-button @click="handleClickUpdate(scope.row)" type="text" size="small">修改</el-button>
        </template>
    </el-table-column>                
</el-table>

// 开关切换
changeSwitch(row, val){
    console.log(row, '=========row switch开关===========');
    console.log(val, '=========val switch开关===========');
    this.$confirm('是否要继续切换开关？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
    }).then(() => {
        // this.submitRuleBaseSwitch(row, val); 调用接口修改数据
    }).catch(() => {
        this.$message({
            type:'info',
            message:'已取消！'
        })
    })
},