<template>
<div>
<h1>goods</h1>
<el-button type="danger" plain @click="del">批量删除</el-button>
<!-- 提示框的颜色 有light和dark -->
<!-- selection-change 勾选的时候触发的函数 -->
<el-table
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:row-key="row=>row.goods_id"
>
<!-- type="selection"表示一个勾选框 -->
<el-table-column
type="selection" width="55"
:reserve-selection="true"
>
</el-table-column>
<el-table-column
prop="add_time"
label="添加时间"
width="120"
></el-table-column>
<el-table-column prop="goods_id" label="商品id" width="120">
<!-- 使用作用域插槽加上tag标签框 -->
<template slot-scope="scope">
<el-tag>{{ scope.row.goods_id }}</el-tag>
</template>
</el-table-column>
<!-- show-overflow-tooltip 当数字超出长度 鼠标移上去显示提示框 -->
<el-table-column
prop="goods_name"
label="商品名称"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="goods_number" label="商品数量" width="120">
</el-table-column>
<el-table-column prop="goods_price" label="商品价格" width="120">
</el-table-column>
</el-table>
</div>
</template>
<script>
import { menusGet, delDelete } from "@/http/request.js";
export default {
data() {
return {
pagenum: 1,
pagesize: 10,
query: "",
tableData: [],
/* 勾选的数据放在整个数组里面 */
multipleSelection: [],
};
},
methods: {
/* 勾选的时候触发 里面的形参就是 勾选的数据 会组合成一个数组 */
handleSelectionChange(val) {
this.multipleSelection = val;
},
/* 批量删除 */
del() {
console.log(delDelete);
this.$confirm('您确定要删除吗？')
.then(()=>{
this.multipleSelection.forEach((r,i) => {
console.log(r.goods_id)
delDelete(`goods/${r.goods_id}`,{
id:r.goods_id
}).then((res) => {
let {meta} = res.data;
/* 状态200表示请求成功，最后一个循环执行的时候再给提示 */
if(meta.status==200&&(i+1)==this.multipleSelection.length){
this.$message.success(meta.msg)
/* 删除数据后，重新渲染页面 */
this.showTable();
}
});
});
})
/* 点击取消走catch */
.catch(()=>{
this.$message.warning('谢谢你的手下留情')
})
},
showTable() {
menusGet("goods", {
pagenum: this.pagenum,
pagesize: this.pagesize,
query: this.query,
})
.then((res) => {
console.log(res);
let { meta, data } = res.data;
if (meta.status == 200) {
this.tableData = data.goods;
}
})
.catch((err) => {
console.log(err);
});
},
},
created() {
this.showTable();
},
};
