Vue3初学之商品的增,删,改功能

用一个商品的后台管理进行增,删,改的实现。

案例进行学习:

typescript 复制代码
<template>
  <div>
    <el-button type="primary" @click="handleNew">新增商品</el-button>
    <el-table :data="goodsList" style="width: 100%">
      <el-table-column prop="id" label="商品ID" />
      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="stock" label="库存" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{row}">
          <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑商品弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form" label-width="100px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="form.price" placeholder="请输入价格" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="库存">
          <el-input-number v-model="form.stock" placeholder="请输入库存" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';

const goodsList = ref([
  { id: 1, name: '商品1', price: 100, stock: 50 },
  { id: 2, name: '商品2', price: 200, stock: 30 }
]);

const dialogVisible = ref(false);
const dialogTitle = ref('');
const form = ref({ name: '', price: 0, stock: 0 });

// 新增商品
const handleNew = () => {
  dialogTitle.value = '新增商品';
  form.value = { name: '', price: 0, stock: 0 };
  dialogVisible.value = true;
};

// 编辑商品
const handleEdit = (row) => {
  dialogTitle.value = '编辑商品';
  form.value = { ...row };
  dialogVisible.value = true;
};

// 删除商品
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该商品吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = goodsList.value.findIndex(item => item.id === row.id);
    goodsList.value.splice(index, 1);
  });
};

// 提交表单
const handleSubmit = () => {
  if (dialogTitle.value === '新增商品') {
    const newId = goodsList.value.length + 1;
    goodsList.value.push({ ...form.value, id: newId });
  } else {
    const index = goodsList.value.findIndex(item => item.id === form.value.id);
    goodsList.value[index] = { ...form.value };
  }
  dialogVisible.value = false;
};
</script>

效果:


相关推荐
前端人类学2 分钟前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
CryptoRzz16 分钟前
印度尼西亚股票数据API对接实现
javascript·后端
lecepin1 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
猩兵哥哥2 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
江城开朗的豌豆3 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort3 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT3 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码3 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅4 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript