vue中switch按钮的接口对接，传true(flase)和1(0)的两种方式

1.传true和flase的方式：

vue文件中：

 
<template slot-scope="scope">
    <el-switch v-model="scope.row.active" 
               active-color="#13ce66" 
               inactive-color="#ff4949" 
               @change="changeStatus($event,scope.row,scope.$index)">
    </el-switch>
</template>
        

    // 开关事件
    changeStatus(e,row,index){ 
      console.log(e,row,index) //e返回状态，row当前行数据，index下标
       let uId=row.id;
       let type=row.active

      // 调用接口
      switchChange(uId,type).then(res =>{
        if(res.data.meta.status !== 200){
          this.$message.error(res.data.meta.msg)
        }else{
          this.$message.success(res.data.meta.msg)
        }
      })
    },

参考文章：element-ui中表格中的Switch 开关如何使用及调接口_weixin_45369963的博客-CSDN博客

2.传1和0的方式：

后端swagger：

 vue文件中：

需求说明
根据后台传值动态显示开关（0为关，1为开）
对开关进行操作时请求后台，需要传两个参数：id，goodsRecommend

解决方法
Swich默认是boolean类型，而后台传值 为number类型，这个时候我们想用number来取代boolean类型；
 
<template slot-scope="{row}">
 推荐：{{row.goodsRecommend}}
<el-switch
 @change="updateGoodsRecommendBy(row)"
 v-model="row.goodsRecommend"
 active-color="#13ce66"
 inactive-color="#ff4949"
 active-value="1"
 inactive-value="0">
 </el-switch>
</template>

请注意以面的写法，active-value和inactive-value的值分别是字符串的1和2,如果你赋值为数字类型的 1 或 2是无法正常工作的，若赋值为数值类型，需这样写：（在后面加上： 就可以了）

<template slot-scope="{row}">
 推荐：{{row.goodsRecommend}}
<el-switch
 @change="updateGoodsRecommendBy(row)"
 v-model="row.goodsRecommend"
 active-color="#13ce66"
 inactive-color="#ff4949"
 :active-value="1"
 :inactive-value="0">
 </el-switch>
</template>

我们使用绑定的方式，同时@change可以传值$event就是switch的当条信息值，scope.row为参数，还可以再添加index表示当前列表的序号@change 也可以绑定的是当前需要调用的接口也要改一下 

updateGoodsRecommendBy(row){
                console.log(row,'row')
                const params={
                    adminId:5,
                    goodsId:row.goodsId,
                    goodsRecommend:Number(row.goodsRecommend),
 
                }
                // return
                updateGoodsRecommendBy(params).then(res => {
                    if (res != null && res.code ==0) {
                        this.$message({
                            message:"成功1",
                            type:"success"
                        })
 
                    }else {
 
                    }
                })
            },

从转载：element ui中el-switch使用（亲测有效）_loveyou2015的博客-CSDN博客_el-switch 

以上转载如有侵权立即删除。