1. Python技术站首页
  2. 其他
  3. JavaScript

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

• JavaScript
yizhihongxing

下面是“Vue element商品列表的增删改功能实现”的完整攻略。

1. 前置知识

在实现 Vue element 商品列表增删改功能前，需要你掌握以下基础知识：

  1. Vue.js 基础知识，比如 Vue.js 的双向数据绑定、组件通信、生命周期等。
  2. Element-UI 基础知识，比如 Element-UI 的组件使用、表单验证等。
  3. RESTful API 接口设计和使用，能够通过 Axios 等工具实现数据的获取、添加、修改和删除等操作。

2. 实现过程

在掌握了上述前置知识后，我们可以按照以下步骤实现 Vue element 商品列表的增删改功能：

2.1 设计数据结构

首先，我们需要设计商品数据结构。可以使用以下数据结构：

{
    序号: Number,
    商品名称: String,
    商品价格: Number
}

2.2 实现数据的获取和显示

我们可以使用 Element-UI 的表格组件来展示商品数据。在 Vue 组件中，我们可以使用以下代码获取商品数据：

mounted () {
    this.getGoodsData()
},
methods: {
    getGoodsData () {
        axios.get('/api/goods') // 发送获取商品数据的请求
            .then(response => {
                this.goodsList = response.data // 将获取到的商品数据赋值给组件的 data 中的 goodsList
            })
            .catch(error => {
                console.log(error)
            })
    }
}

在表格组件中，我们可以使用以下代码展示商品数据：

<el-table :data="goodsList" style="width: 100%">
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column label="商品名称" prop="商品名称"></el-table-column>
    <el-table-column label="商品价格" prop="商品价格" width="120"></el-table-column>
    <el-table-column label="操作" width="120">
        <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button @click="handleDelete(scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

2.3 实现数据的添加和修改

在表格组件外，我们可以使用以下代码实现添加和修改商品数据：

<el-form :model="addFormData" ref="addForm" label-width="100px" class="add-form">
    <el-form-item label="商品名称" prop="name">
        <el-input v-model="addFormData.name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="price">
        <el-input v-model="addFormData.price"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="handleAddGoods" :loading="addGoodsLoading">添加</el-button>
        <el-button @click="handleCancelAddGoods">取消</el-button>
    </el-form-item>
</el-form>

data () {
    return {
        dialogAddGoodsVisible: false, // 是否展示添加商品的弹窗
        addGoodsLoading: false, // 添加商品时的loading状态
        addFormData: { // 添加商品的表单数据
            name: '',
            price: ''
        },
        editGoodsData: {}, // 编辑商品的数据
        editGoodsVisible: false, // 是否展示编辑商品的弹窗
        editGoodsLoading: false, // 编辑商品时的loading状态
        editFormData: { // 编辑商品的表单数据
            name: '',
            price: ''
        }
    }
},
methods: {
    // 点击表格中的编辑按钮
    handleEdit (data) {
        this.editGoodsData = data
        this.editFormData.name = data['商品名称']
        this.editFormData.price = data['商品价格']
        this.editGoodsVisible = true
    },
    // 点击表格中的删除按钮
    handleDelete (data) {
        const index = this.goodsList.indexOf(data)
        if (index !== -1) {
            this.goodsList.splice(index, 1)
        }
    },
    // 点击添加商品按钮
    handleAddGoods () {
        this.$refs.addForm.validate(valid => {
            if (valid) {
                this.addGoodsLoading = true
                axios.post('/api/goods', { // 发送添加商品的请求
                    name: this.addFormData.name,
                    price: Number(this.addFormData.price)
                })
                    .then(response => {
                        this.$message.success('添加成功')
                        const { id, name, price } = response.data.data
                        this.goodsList.push({
                            序号: this.goodsList[this.goodsList.length - 1]['序号'] + 1,
                            '商品名称': name,
                            '商品价格': price,
                            id
                        })
                        this.handleCancelAddGoods()
                    })
                    .catch(error => {
                        console.log(error)
                    })
                    .finally(() => {
                        this.addGoodsLoading = false
                    })
            }
        })
    },
    // 点击取消添加按钮
    handleCancelAddGoods () {
        this.$refs.addForm.resetFields()
        this.dialogAddGoodsVisible = false
    },
    // 点击编辑商品按钮
    handleEditGoods () {
        this.$refs.editForm.validate(valid => {
            if (valid) {
                this.editGoodsLoading = true
                axios.put(`/api/goods/${this.editGoodsData.id}`, { // 发送修改商品的请求
                    name: this.editFormData.name,
                    price: Number(this.editFormData.price)
                })
                    .then(response => {
                        this.$message.success('修改成功')
                        const index = this.goodsList.findIndex(item => item.id === this.editGoodsData.id)
                        if (index !== -1) {
                            this.goodsList[index]['商品名称'] = this.editFormData.name
                            this.goodsList[index]['商品价格'] = this.editFormData.price
                        }
                        this.handleCancelEditGoods()
                    })
                    .catch(error => {
                        console.log(error)
                    })
                    .finally(() => {
                        this.editGoodsLoading = false
                    })
            }
        })
    },
    // 点击取消编辑按钮
    handleCancelEditGoods () {
        this.$refs.editForm.resetFields()
        this.editGoodsVisible = false
    }
}

2.4 实现数据的删除

在表格组件中，我们可以使用以下代码实现删除商品数据：

handleDelete (data) {
    this.$confirm(`确定要删除 ${data['商品名称']} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            return axios.delete(`/api/goods/${data.id}`) // 发送删除商品数据的请求
        })
        .then(response => {
            this.$message.success('删除成功')
            const index = this.goodsList.indexOf(data)
            if (index !== -1) {
                this.goodsList.splice(index, 1)
            }
        })
        .catch(error => {
            console.log(error)
        })
}

3. 示例说明

下面给出两个示例：

示例一

如果需要在添加商品时添加有关联的分类信息，可以使用以下代码：

<el-form :model="addFormData" ref="addForm" label-width="100px" class="add-form">
    <el-form-item label="商品名称" prop="name">
        <el-input v-model="addFormData.name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="price">
        <el-input v-model="addFormData.price"></el-input>
    </el-form-item>
    <el-form-item label="商品分类" prop="category">
        <el-cascader v-model="addFormData.category"
                     :options="categoryList"
                     :props="{ label: 'name', value: 'id', children: 'children' }"></el-cascader>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="handleAddGoods" :loading="addGoodsLoading">添加</el-button>
        <el-button @click="handleCancelAddGoods">取消</el-button>
    </el-form-item>
</el-form>

data () {
    return {
        categoryList: [], // 商品分类列表
        addFormData: { // 添加商品的表单数据
            name: '',
            price: '',
            category: [] // 商品分类的编号数组
        }
    }
},
methods: {
    getCategoryList () {
        axios.get('/api/category')
            .then(response => {
                this.categoryList = response.data // 将获取到的商品分类数据赋值给组件的 data 中的 categoryList
            })
            .catch(error => {
                console.log(error)
            })
    }
}

示例二

如果需要在编辑商品时同时上传商品的图片，可以使用以下代码：

<el-form :model="editFormData" ref="editForm" label-width="100px" class="add-form">
    <el-form-item label="商品名称" prop="name">
        <el-input v-model="editFormData.name"></el-input>
    </el-form-item>
    <el-form-item label="商品价格" prop="price">
        <el-input v-model="editFormData.price"></el-input>
    </el-form-item>
    <el-form-item label="商品图片" prop="image">
        <el-upload class="upload-demo"
                   :on-success="uploadSuccess"
                   :before-upload="beforeUpload"
                   :file-list="fileList"
                   :action="`/api/goods/image/${this.editGoodsData.id}`"
                   :headers="{ Authorization: `Bearer {token}` }">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="handleEditGoods" :loading="editGoodsLoading">保存</el-button>
        <el-button @click="handleCancelEditGoods">取消</el-button>
    </el-form-item>
</el-form>

data () {
    return {
        fileList: [], // 上传的文件列表
        editGoodsData: {}, // 编辑商品的数据
        editFormData: { // 编辑商品的表单数据
            name: '',
            price: ''
        },
        editGoodsVisible: false, // 是否展示编辑商品的弹窗
        editGoodsLoading: false // 编辑商品时的loading状态
    }
},
methods: {
    // 上传图片前的校验
    beforeUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPNG) {
            this.$message.error('上传图片只能是 JPG/PNG 格式!')
            return false
        }
        if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
            return false
        }
        return true
    },
    // 上传图片成功后的回调函数
    uploadSuccess (response, file, fileList) {
        this.fileList = fileList.slice(-1) // 只展示最新上传的一张图片
        this.$message.success('上传成功')
    }
}

以上就是“Vue element商品列表的增删改功能实现”的完整攻略。需要提醒的是，以上代码中的实际请求地址和数据结构，需要根据实际情况作出相应更改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue element商品列表的增删改功能实现 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js实现获取当前时间是本月第几周的方法

    获取当前日期是本月第几周可以使用JavaScript中Date对象中的一些方法来实现。下面是具体的实现方法以及示例说明： 获取当前时间 在JavaScript中通过创建一个Date对象来获取当前的时间，可以使用new关键字和Date构造函数来创建一个Date对象： const now = new Date(); 获取当前时间的月份以及日期 获取当前时间所在的…

    JavaScript 2023年5月27日
    00

  • javascript创建cookie、读取cookie

    创建Cookie: JavaScript 创建 Cookie 很容易。下面是创建 Cookie 的语法： document.cookie = "key=value; expires=date; path=pathName"; 说明： key=value：键值对，表示要保存的数据。 expires=date：可选。设置 Cookie 的过期…

    JavaScript 2023年6月11日
    00

  • 10分钟学会js处理json的常用方法

    下面我将详细讲解“10分钟学会js处理json的常用方法”的完整攻略。 1. 前言 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，常见于前后端数据传输。在JavaScript中，我们可以通过一系列的方法和函数来处理JSON数据，以满足不同的业务需求。 2. JSON的基本语法 JSON由两种结构组成：- 键值对-…

    JavaScript 2023年5月27日
    00

  • 在Javascript中 声明时用”var”与不用”var”的区别

    在 JavaScript 中，声明变量时可以使用 var 关键字或省略该关键字。这两种方式在行为上是不同的，以下是它们之间的区别: 使用 var 声明变量 在 JavaScript 中，使用 var 关键字声明变量时，变量会被限制在当前的执行环境中。这意味着，在声明变量的函数内部，使用 var 定义的变量是该函数内部私有的，并且在全局（window）范围之外…

    JavaScript 2023年6月10日
    00

  • JavaScript中利用for循环遍历数组

    当我们需要处理数组中的所有元素时，可以使用for循环来遍历数组，可以使用以下步骤完成： 获取数组长度 在处理数组时，我们需要知道数组中有多少元素。我们可以使用数组的length属性获取数组长度，如下所示： const fruits = [‘apple’, ‘orange’, ‘banana’]; const length = fruits.length; c…

    JavaScript 2023年5月27日
    00

  • javascript如何返回字符串的所有排列

    要返回一个字符串的所有排列，可以使用递归和回溯的方法。下面的代码展示了如何实现这个功能： function permutations(input) { const str = input.split(""); const results = []; function permute(arr, memo = []) { if (arr.le…

    JavaScript 2023年5月28日
    00

  • 你可能不知道的JavaScript位运算符详解

    你可能不知道的JavaScript位运算符详解 介绍 在JavaScript中，除了常用的加减乘除运算符，还有一些位运算符。这些运算符可以对给定的数字进行二进制位操作。本文将为你详细讲解这些运算符。 位运算符分类 JavaScript中一共有7种位运算符，可以分为以下几类： 按位与运算符（&） 按位或运算符（|） 按位异或运算符（^） 左移运算符（&…

    JavaScript 2023年5月28日
    00

  • Javascript delete 引用类型对象

    删除引用类型对象在Javascript中是一项常见操作，但需要注意这种操作不会真正删除对象，而是断开了引用对象的所有指针，并在垃圾回收机制自动回收这些对象。下面是对delete操作的详细解释。 什么是引用类型对象？ 在Javascript中，对象是由键值对组成的无序集合。引用类型是Javascript中一个非常重要的概念，它允许我们通过指针引用和操作内存中的…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部