Vue element商品列表的增删改功能怎么实现

Vue Element商品列表的增删改功能怎么实现

目录

1. 引言
2. 项目环境搭建
3. 商品列表展示
4. 添加商品功能
5. 编辑商品功能
6. 删除商品功能
7. 总结

引言

在现代Web开发中，Vue.js因其简洁、灵活和高效的特点，成为了前端开发的热门选择。而Element UI作为一套基于Vue.js的桌面端组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观且功能强大的用户界面。本文将详细介绍如何使用Vue.js和Element UI实现一个商品列表的增删改功能。

项目环境搭建

在开始实现商品列表的增删改功能之前，我们需要先搭建一个Vue.js项目，并引入Element UI库。

1. 创建Vue项目

首先，确保你已经安装了Node.js和Vue CLI。如果还没有安装，可以通过以下命令进行安装：

npm install -g @vue/cli 

然后，使用Vue CLI创建一个新的Vue项目：

vue create product-list 

在创建项目时，选择默认配置或手动选择需要的特性。

2. 引入Element UI

进入项目目录并安装Element UI：

cd product-list npm install element-ui --save 

在src/main.js中引入Element UI并注册：

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount('#app'); 

3. 创建商品列表组件

在src/components目录下创建一个名为ProductList.vue的组件文件，并在src/App.vue中引入并使用该组件。

<!-- src/App.vue --> <template> <div id="app"> <ProductList /> </div> </template> <script> import ProductList from './components/ProductList.vue'; export default { components: { ProductList } }; </script> 

商品列表展示

在ProductList.vue中，我们将使用Element UI的el-table组件来展示商品列表。

1. 定义商品数据

首先，定义一个商品数据数组，包含商品的名称、价格和库存等信息。

<!-- src/components/ProductList.vue --> <template> <div> <el-table :data="products" style="width: 100%"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="stock" label="库存"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { products: [ { id: 1, name: '商品A', price: 100, stock: 10 }, { id: 2, name: '商品B', price: 200, stock: 20 }, { id: 3, name: '商品C', price: 300, stock: 30 } ] }; } }; </script> 

2. 添加操作列

为了实现对商品的增删改操作，我们需要在表格中添加一个操作列，包含编辑和删除按钮。

<!-- src/components/ProductList.vue --> <template> <div> <el-table :data="products" style="width: 100%"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="stock" label="库存"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { products: [ { id: 1, name: '商品A', price: 100, stock: 10 }, { id: 2, name: '商品B', price: 200, stock: 20 }, { id: 3, name: '商品C', price: 300, stock: 30 } ] }; }, methods: { handleEdit(index, row) { console.log('编辑商品', index, row); }, handleDelete(index, row) { console.log('删除商品', index, row); } } }; </script> 

添加商品功能

接下来，我们将实现添加商品的功能。我们将使用Element UI的el-dialog组件来创建一个添加商品的弹窗。

1. 添加弹窗组件

在ProductList.vue中添加一个弹窗组件，用于输入新商品的信息。

<!-- src/components/ProductList.vue --> <template> <div> <el-button type="primary" @click="dialogVisible = true">添加商品</el-button> <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%"> <el-form :model="newProduct" label-width="80px"> <el-form-item label="商品名称"> <el-input v-model="newProduct.name"></el-input> </el-form-item> <el-form-item label="价格"> <el-input v-model="newProduct.price"></el-input> </el-form-item> <el-form-item label="库存"> <el-input v-model="newProduct.stock"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleAdd">确 定</el-button> </span> </el-dialog> <el-table :data="products" style="width: 100%"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="stock" label="库存"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { dialogVisible: false, newProduct: { name: '', price: '', stock: '' }, products: [ { id: 1, name: '商品A', price: 100, stock: 10 }, { id: 2, name: '商品B', price: 200, stock: 20 }, { id: 3, name: '商品C', price: 300, stock: 30 } ] }; }, methods: { handleAdd() { this.products.push({ id: this.products.length + 1, name: this.newProduct.name, price: this.newProduct.price, stock: this.newProduct.stock }); this.dialogVisible = false; this.newProduct = { name: '', price: '', stock: '' }; }, handleEdit(index, row) { console.log('编辑商品', index, row); }, handleDelete(index, row) { console.log('删除商品', index, row); } } }; </script> 

2. 表单验证

为了确保用户输入的数据有效，我们可以使用Element UI的表单验证功能。

<!-- src/components/ProductList.vue --> <template> <div> <el-button type="primary" @click="dialogVisible = true">添加商品</el-button> <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%"> <el-form :model="newProduct" :rules="rules" ref="newProductForm" label-width="80px"> <el-form-item label="商品名称" prop="name"> <el-input v-model="newProduct.name"></el-input> </el-form-item> <el-form-item label="价格" prop="price"> <el-input v-model="newProduct.price"></el-input> </el-form-item> <el-form-item label="库存" prop="stock"> <el-input v-model="newProduct.stock"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleAdd">确 定</el-button> </span> </el-dialog> <el-table :data="products" style="width: 100%"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="stock" label="库存"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { dialogVisible: false, newProduct: { name: '', price: '', stock: '' }, rules: { name: [ { required: true, message: '请输入商品名称', trigger: 'blur' } ], price: [ { required: true, message: '请输入价格', trigger: 'blur' }, { type: 'number', message: '价格必须为数字值', trigger: 'blur', transform: (value) => Number(value) } ], stock: [ { required: true, message: '请输入库存', trigger: 'blur' }, { type: 'number', message: '库存必须为数字值', trigger: 'blur', transform: (value) => Number(value) } ] }, products: [ { id: 1, name: '商品A', price: 100, stock: 10 }, { id: 2, name: '商品B', price: 200, stock: 20 }, { id: 3, name: '商品C', price: 300, stock: 30 } ] }; }, methods: { handleAdd() { this.$refs.newProductForm.validate((valid) => { if (valid) { this.products.push({ id: this.products.length + 1, name: this.newProduct.name, price: Number(this.newProduct.price), stock: Number(this.newProduct.stock) }); this.dialogVisible = false; this.newProduct = { name: '', price: '', stock: '' }; } else { return false; } }); }, handleEdit(index, row) { console.log('编辑商品', index, row); }, handleDelete(index, row) { console.log('删除商品', index, row); } } }; </script> 

编辑商品功能

接下来，我们将实现编辑商品的功能。我们将使用与添加商品类似的弹窗组件，并在点击编辑按钮时，将当前商品的数据填充到表单中。

1. 添加编辑弹窗组件

在ProductList.vue中添加一个编辑弹窗组件，并在点击编辑按钮时显示该弹窗。

<!-- src/components/ProductList.vue --> <template> <div> <el-button type="primary" @click="dialogVisible = true">添加商品</el-button> <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%"> <el-form :model="newProduct" :rules="rules" ref="newProductForm" label-width="80px"> <el-form-item label="商品名称" prop="name"> <el-input v-model="newProduct.name"></el-input> </el-form-item> <el-form-item label="价格" prop="price"> <el-input v-model="newProduct.price"></el-input> </el-form-item> <el-form-item label="库存" prop="stock"> <el-input v-model="newProduct.stock"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleAdd">确 定</el-button> </span> </el-dialog> <el-dialog title="编辑商品" :visible.sync="editDialogVisible" width="30%"> <el-form :model="currentProduct" :rules="rules" ref="editProductForm" label-width="80px"> <el-form-item label="商品名称" prop="name"> <el-input v-model="currentProduct.name"></el-input> </el-form-item> <el-form-item label="价格" prop="price"> <el-input v-model="currentProduct.price"></el-input> </el-form-item> <el-form-item label="库存" prop="stock"> <el-input v-model="currentProduct.stock"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="editDialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleEditConfirm">确 定</el-button> </span> </el-dialog> <el-table :data="products" style="width: 100%"> <el-table-column prop="name" label="商品名称"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="stock" label="库存"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { dialogVisible: false, editDialogVisible: false, newProduct: { name: '', price: '', stock: '' }, currentProduct: { id: '', name: '', price: '', stock: '' }, rules: { name: [ { required: true, message: '请输入商品名称', trigger: 'blur' } ], price: [ { required: true, message: '请输入价格', trigger: 'blur' }, { type: 'number', message: '价格必须为数字值', trigger: 'blur', transform: (value) => Number(value) } ], stock: [ { required: true, message: '请输入库存', trigger: 'blur' }, { type: 'number', message: '库存必须为数字值', trigger: 'blur', transform: (value) => Number(value) } ] }, products: [ { id: 1, name: '商品A', price: 100, stock: 10 }, { id: 2, name: '商品B', price: 200, stock: 20 }, { id: 3, name: '商品C', price: 300, stock: 30 } ] }; }, methods: { handleAdd() { this.$refs.newProductForm.validate((valid) => { if (valid) { this.products.push({ id: this.products.length + 1, name: this.newProduct.name, price: Number(this.newProduct.price), stock: Number(this.newProduct.stock) }); this.dialogVisible = false; this.newProduct = { name: '', price: '', stock: '' }; } else { return false; } }); }, handleEdit(index, row) { this.currentProduct = { ...row }; this.editDialogVisible = true; }, handleEditConfirm() { this.$refs.editProductForm.validate((valid) => { if (valid) { const index = this.products.findIndex(product => product.id === this.currentProduct.id); if (index !== -1) { this.products.splice(index, 1, { id: this.currentProduct.id, name: this.currentProduct.name, price: Number(this.currentProduct.price), stock: Number(this.currentProduct.stock) }); } this.editDialogVisible = false; } else { return false; } }); }, handleDelete(index, row) { console.log('删除商品', index, row); } } }; </script> 

2. 实现编辑功能

在handleEditConfirm方法中，我们首先验证表单数据，然后找到当前商品在列表中的索引，并使用splice方法更新商品数据。

删除商品功能

最后，我们将实现删除商品的功能。我们将使用Element UI的el-message-box组件来确认删除操作。

1. 添加删除确认弹窗

在`