vue3.2/Vite/Ts74: 删除已有商品
·
Yin灏
目录结构
└─src
├─api
│ └─product
│ └─sku
│ └─index.ts
└─views
└─product
└─sku
└─index.vue
删除按钮绑定事件
src/views/product/sku/index.vue
<template>
<el-card :data="skuArr">
<el-table border>
<!-- ... -->
<el-table-column label="操作" width="250px" fixed="right">
<template #="{ row }">
<!-- 删除商品 -->
<el-popconfirm
:title="`你确定要删除${row.skuName}?`"
width="200px"
@confirm="removeSku(row.id)"
>
<template #reference>
<el-button type="primary" size="small" icon="Delete"></el-button>
</template>
</el-popconfirm>
<!-- ... -->
</template>
</el-table-column>
</el-table>
<!-- ... -->
</el-card>
</template>
<script setup lang="ts">
import { reqRemoveSku } from "@/api/product/sku";
//...
const removeSku = async (id: number) => {
const result: any = await reqRemoveSku(id);
if (result.code === 200) {
ElMessage({
type: "success",
message: "删除成功",
});
getHasSku(skuArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
} else {
ElMessage({
type: "error",
message: "删除失败",
});
}
};
</script>
删除商品接口处理
src/api/product/sku/index.ts
//...
enum API {
//...
DELETESKU_URL = "/admin/product/deleteSku/",
}
//...
export const reqRemoveSku = (skuId: number) =>
request.get<any, any>(API.DELETESKU_URL + skuId);