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 

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

Logo

前往低代码交流专区

更多推荐