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