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設爲原來的值

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章