目录

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（接口实现）

    @Overridepublic 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>whereid = #{id}</update>

6.效果

 

4、el-switch属性