行业资讯

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

发布时间：2022-08-30 13:58:52 作者：iii
来源：亿速云 阅读：519

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. 添加删除确认弹窗

在`

推荐阅读：
  1. Django怎么实现列表页商品数据返回功能
  2. vue如何实现商品列表的添加删除

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

vue element

上一篇：SQL处理时间戳时怎么解决时区问题

下一篇：在PyCharm中怎么使用FMEObjects

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号