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>

效果:


相关推荐
weixin_472339462 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击3 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue4 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762905 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
lzb_kkk6 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼7 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客7 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang