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.$in
·
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
以上转载如有侵权立即删除。
更多推荐
已为社区贡献15条内容
所有评论(0)