灏天阁

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);

- Book Lists -