目录
1、编写模板
2、发送请求
3、后端返数据
1.Controller类
2.interface接口（Service层接口）
3.Service（接口实现）
4.interface接口（Mapper层接口）
5.xml
6.效果
4、el-switch属性
1、编写模板
<el-table :data="goodsData" border style="width: 100%">
<el-table-column prop="id" label="id" width="180"></el-table-column>
<el-table-column prop="name" label="商品名称" width="180"></el-table-column>
<el-table-column prop="price" label="商品价格" width="180"></el-table-column>
<el-table-column prop="imageUrl" label="商品图片" width="180"></el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.status"
active-color="green"
inactive-color="#ff4949"
active-value="1"
active-text="未删除"
inactive-text="已删除"
inactive-value="0"
width="50"
@change="deleteGoods(scope.row.id, scope.row.status)">
</el-switch>
</template>
</el-table-column>
</el-table>
2、发送请求
deleteGoods(id,status){
if(id!=''&&id!=null){
this.$axios({
method:'post',
url:'http://localhost:8080/api/upload/deleteGoods',
data:{
id:id,
status:status
}
}).then((res)=>{
this.$message({
message:'修改成功',
type:"success"
})
})
}
},3、后端返数据
1.Controller类
@PostMapping("/deleteGoods")
public Result deleteGoods(@RequestBody Goods goods) {
return uploadFileService.deletegoods(goods);
}2.interface接口（Service层接口）
public interface UploadFileService {
Result deletegoods(Goods goods);
}3.Service（接口实现）
@Override
public Result deletegoods(Goods goods) {
//删除：物理删除，逻辑删除
//这里是逻辑删除
int count=uploadFileMapper.updateGoods(goods);
if (count==1){
return Result.succeed("删除成功");
}else{
return Result.failed("删除失败");
}
}4.interface接口（Mapper层接口）
public interface UploadFileMapper {
int updateGoods(Goods goods);
}
5.xml
<update id="updateGoods">
update goods
<set>
<if test="name!=''and name!=null">name=#{name},</if>
<if test="price!=''and price!=null">price=#{price},</if>
<if test="imageUrl!=null">imageUrl=#{imageUrl},</if>
<if test="status!=''and status!=null">status=#{status}</if>
</set>
where
id = #{id}
</update>6.效果
文章来源：https://www.toymoban.com/news/detail-814955.html
4、el-switch属性
文章来源地址https://www.toymoban.com/news/detail-814955.html
到了这里，关于Vue+Element(el-switch的使用)+springboot的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
