element+vue设置switch传后台 接口 数据

            <el-table-column prop="is_commission" label="是否返佣" width="80">
                <template slot-scope="scope">
                    <el-switch :value="scope.row.is_commission" :active-value="1" :inactive-value="0" @change="publish(scope.row)"></el-switch>
                </template>
            </el-table-column>

在一个列表中，判断是否返佣，两个参数如下

active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false

调用的方法如下

publish(item) {
            item.is_commission = item.is_commission == 1 ? 0 : 1;
//新增一个参数item.is_commission,来获取转换后的值，把转换后的值，传入后台
            this.axios
                .post('/api/platform/shopactivity/promoterCommission', { id: item.id, is_commission: item.is_commission })
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success('操作成功');
                    } else {
                        this.$message.error(res.msg);
                        item.is_commission = is_commission;
                    }
                })
                .catch((err) => {
                    item.is_commission = is_commission;
                    this.$alert(err);
                });
        },

运用switch控件 思路如下：

1、写入控件，把后台传入的值放在value里面

2、在设置switch打开关闭的值，active-value  打开时的值    ，inactive-value 关闭的值

3、利用click调用点击后的方法

4、在方法中，利用三目运算符，修改要传入后台的值

5、使用axios，看返回值是否成功，成功则提示，不成功，就把switch设为原来的值