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

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

1. 前置知识

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

Vue.js 基础知识，比如 Vue.js 的双向数据绑定、组件通信、生命周期等。
Element-UI 基础知识，比如 Element-UI 的组件使用、表单验证等。
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技术站