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

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

• JavaScript

下面是“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日

相关文章

  • 论坛转贴工具中用到的正则表达式学习正则的好例子

    让我来详细讲解一下“论坛转贴工具中用到的正则表达式学习正则的好例子”的完整攻略。 正则表达式简介 正则表达式（Regular Expression，简称RE）是一种用于匹配字符串中的模式的表达式，它具有简洁、灵活、功能强大等优点。在web开发中，我们经常会使用正则表达式来过滤、查询、替换字符串。因此，熟练掌握正则表达式是web开发工程师必不可少的技能之一。 …

    JavaScript 2023年6月10日
    00

  • js中取得变量绝对值的方法

    当我们需要在 JavaScript 中获取一个变量的绝对值时，可以使用 Math 对象的 abs() 方法。下面是详细的攻略： 使用 Math.abs() 方法获取变量的绝对值 Math 对象是 JavaScript 提供的一个内置对象，通过该对象提供的 abs() 方法，即可获取任意数字类型的变量的绝对值。 let num1 = -5, num2 = 10…

    JavaScript 2023年5月28日
    00

  • JavaScript原始值与包装对象的详细介绍

    我来为你详细讲解“JavaScript原始值与包装对象的详细介绍”这个话题。 JavaScript原始值和包装对象介绍 在JavaScript中，原始值指的是不可变的基本类型数据，例如字符串、数字、布尔值等，而非原始值则是JavaScript提供的对象类型。在操作原始值时，JavaScript会自动创建一个临时的包装对象(Wrapper Object)，在操…

    JavaScript 2023年6月11日
    00

  • 基于JavaScript判断两个对象内容是否相等

    要基于JavaScript判断两个对象内容是否相等，一般可以采用以下几个方法： 1. 使用JSON.stringify()方法 可以使用JSON.stringify()方法将对象转化成字符串，再比较两个对象的字符串是否相等，代码如下： const obj1 = { name: "Tom", age: 18 }; const obj2 = …

    JavaScript 2023年5月27日
    00

  • javascript 保存文件到本地实现方法

    下面是关于“JavaScript保存文件到本地实现方法”的攻略： 简介 在Web应用程序中，有时可能需要将用户生成的数据以文件的形式保存到本地硬盘，以备以后离线查看或者处理。这个时候，可以使用JavaScript来实现将数据保存到本地的功能。本文将介绍两种常用的方法。 方法一：使用Blob和URL.createObjectURL() 该方法的核心是使用Blo…

    JavaScript 2023年5月27日
    00

  • 判断目标是否是window,document,和拥有tagName的Element的代码

    判断目标是否是 Window, Document 和拥有 tagName 的 Element 是前端开发中一种常见的操作，以下是该操作的完整攻略： 1. 判断目标是否是 Window 对象 判断一个对象是否是 Window 对象，可以通过将该对象与全局的 window 对象进行比较，相关代码如下： function isWindow(obj) { retur…

    JavaScript 2023年6月10日
    00

  • JavaScript对象数组的排序处理方法

    JavaScript对象数组排序是一个经常用到的功能，下面是对于该主题的完整攻略： 什么是对象数组 对象数组就是包含多个对象并且以数组形式进行存储的数据来源。 比如我们可以创建如下形式的对象数组： const users = [ { name: ‘Jack’, age: 30 }, { name: ‘Tom’, age: 20 }, { name: ‘Luc…

    JavaScript 2023年5月27日
    00

  • 用js编写的简单的计算器代码程序

    为了编写一个简单的计算器程序，我们可采用HTML、CSS、JavaScript等技术。下面将分步骤讲解如何制作一个基于JS编写的简易计算器程序。 步骤一：创建基本的HTML代码 我们需要创建一个空白的HTML文件，并添加必要的元素，例如标题，文本输入框和按钮。通过以下HTML代码可以实现： <!DOCTYPE html> <html>…

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