接第二课继续往下说,下面讲调用批量删除接口删除商品
/**
* /api/del/all/goods 批量删除商品
*/
export function delAllShopFun(data) {
return request({
url: '/api/del/all/goods',
method: 'delete',
data
})
}
- 然后复制
delShopFun
方法,在需要的页面引入进来
import { delAllShopFun } from "@/api/user";
- 方法引入后,放在那待用,既然要执行批量删除商品,根据后端接口文档要求,要传给后端key为
ids
,value为要删除商品的id数组
的json对象,即如下:
{
"ids":["62f5f109c30baf69c6bd8c61","62f5f10ac30baf69c6bd8c63"]
}
- 既然要传id数组,那就要先拿到我们选择的商品数据,table表格给我们提供了一个方法,找到element-ui文档的多选表格
image.png
- 有一个方法 叫
selection-change
,给表格绑定这个方法@selection-change="handleSelectionChange"
,当你多选后,会触发handleSelectionChange
方法,会回调你选中的数据数组,如下
<el-table
:data="tableData"
style="width: 100%"
size="small"
border
@selection-change="handleSelectionChange"
:height="tableHeight"
>
......
......
......
</el-table>
methods:{
handleSelectionChange(e){
console.log(e);
}
}
image.png
- 可以看到,此方法回调的是一组你选中的数据数组,后端需要的是一组id数组,那么我们就要使用方法,把id拿出来,组装成id数组,这里使用
map
方法
data() {
return {
ids:[],//定义一个空数组
};
},
handleSelectionChange(e){
console.log(e);
this.ids = e.map(item=>{
return item._id //返回每条数据的_id
})
console.log(this.ids);
}
- 既然我们拿到了id数组,下面就可以继续开发点击【批量删除】按钮触发调用批量删除的接口了
<el-button type="danger" size="small" icon="el-icon-delete" @click="handelDelAll">批量删除</el-button>
handelDelAll(){
if(this.ids.length==0){
alert("请先选中要删除的商品")
return
}
delAllShopFun({ids:this.ids}).then(res=>{
alert("删除成功")
this.getShopListFun()
})
}
继续往下说,下面讲实现switch开发控制商品上下架,调用update接口
change switch 状态发生变化时的回调函数
- 给switch开关绑定一个change事件,该事件回调一个
新状态的值
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="2"
active-color="#13ce66"
inactive-color="#eee"
@change="changeSwitch"
>
</el-switch>
changeSwitch(e){
console.log(e);
}
image.png
- 打开接口文档找到修改商品的接口路径
/api/update/goods/:id
,注意:id是动态参数,拼接到接口路径后面的
- 打开
src/api/user.js
文件,新建一个修改商品信息的接口
/**
* /api/update/goods/:id 更新商品信息
*/
export function updateShopFun(data,id) {
return request({
url: '/api/update/goods/'+id,
method: 'put',
data
})
}
- 然后在需要的页面 引入
updateShopFun
方法
import { updateShopFun } from "@/api/user";
- 然后在
changeSwitch
方法内调用该方法,根据文档传status
参数给到后端,因为changeSwitch回调的是新状态的值
,我们要拿到新状态的值
和这条数据的id,所以要覆盖changeSwitch默认的回调
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="2"
active-color="#13ce66"
inactive-color="#eee"
@change="changeSwitch(scope.row)"
>
</el-switch>
changeSwitch(e){
console.log(e);
updateShopFun({status:e.status},e._id).then(res=>{
alert('更新成功')
})
}
网友评论