【Vue.js】实现商品添加、列表展示和删除商品

在这里插入图片描述
在这里插入图片描述

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Management</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./firstCategory.js"></script>
    <script src="./specs.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            margin: 10px 50px;
            border: 1px solid #333;
        }

        #app h3 {
            padding: 10px 0 10px 0;
            font: 16px/1 "微软雅黑";
            text-align: center;
        }

        #app p {
            margin: 30px 0 0 70px;
        }

        #app p label {
            display: inline-block;
            width: 120px;
            text-align: right;
            font: 15px/1 "微软雅黑";
        }

        #app p label i {
            color: #f56c6c;
        }

        #app p select {
            width: 320px;
            height: 40px;
            outline: none;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            text-indent: 20px;
            /* color: #DCDFE6; */
        }

        #app p select option {
            font-size: 16px;
        }

        #app p input {
            width: 800px;
            height: 40px;
            outline: none;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            text-indent: 20px;
            /* color: #DCDFE6; */
        }

        button {
            display: inline-block;
            width: 80px;
            height: 40px;
            outline: none;
        }

        .add {
            border: 1px solid #409eff;
            background-color: #ecf5ff;
            border-radius: 5px;
            color: #409eff;
            cursor: pointer;
            margin: 20px 40px 20px 200px;
        }

        .reset {
            border: 1px solid #43C088;
            background-color: #ecf5ff;
            border-radius: 5px;
            color: #43C088;
            cursor: pointer;
            margin: 20px 40px 20px 40px;
        }

        .delete {
            border: 1px solid #933DA1;
            background-color: #BF8EC6;
            border-radius: 5px;
            color: #933DA1;
            cursor: pointer;
        }

        table {
            text-align: center;
        }

        th,
        td {
            border: 1px solid #DCDFE6;
        }

        .img {
            display: block;
            width: 200px;
            height: 160px;
        }

        .ml140 {
            margin-left: 140px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>添加商品</h3>
        <p>
            <label><i>*&nbsp;</i>一级分类&nbsp;</label>
            <select name="firstCategory" v-model="goods.firstCategory" @change="onSelectCategory1">
                <option :value="0">请选择</option>
                <option v-for="item of firstCategory" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </p>
        <p>
            <label><i>*&nbsp;</i>二级分类&nbsp;</label>
            <select name="secondCategory" v-model="goods.secondCategory">
                <option :value="0">请选择</option>
                <option v-for="item of secondCategory" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </p>
        <p>
            <label><i>*&nbsp;</i>商品名称&nbsp;</label>
            <input type="text" v-model.trim.lazy="goods.name">
        </p>
        <p>
            <label><i>*&nbsp;</i>价格&nbsp;</label>
            <input type="text" v-model.number.lazy="goods.price">
        </p>
        <p>
            <label><i>*&nbsp;</i>市场价格&nbsp;</label>
            <input type="text" v-model.number.lazy="goods.marketPrice">
        </p>
        <p>
            <label>图片</label>
            <input type="text" v-model="goods.img">
            <img v-if="goods.img!=''" :src="goods.img" class="img ml140">
        </p>
        <p>
            <label><i>*&nbsp;</i>商品规格&nbsp;</label>
            <select name="specs" v-model="goods.specs" @change="onSelectSpecs1">
                <option :value="0">请选择</option>
                <option v-for="item of specs" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </p>
        <p>
            <label><i>*&nbsp;</i>规格属性&nbsp;</label>
            <select name="attribute" v-model="goods.attribute">
                <option :value="0">请选择</option>
                <option v-for="item of attribute" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </p>
        <button class="add" @click="addToList">添加商品</button>
        <button class="reset" @click="resetList">重置内容</button>
        <!-- <p>
            一级分类: {{goods.firstCategory}}<br>
            二级分类: {{goods.secondCategory}}<br>
            商品名称: {{goods.name}}<br>
            价格:{{goods.price}}<br>
            市场价格:{{goods.marketPrice}}<br>
            图片:{{goods.img}}<br>
            商品规格:{{goods.specs}}<br>
            规格属性:{{goods.attribute}}
        </p> -->
        <!-- table -->
        <table border="0" cellspacing="0">
            <tr>
                <th width="200" height="100">商品名称</th>
                <th width="200" height="100">商品分类</th>
                <th width="200" height="100">商品价格</th>
                <th width="200" height="100">市场价格</th>
                <th width="200" height="100">图片</th>
                <th width="200" height="100">是否热卖</th>
                <th width="200" height="100">操作</th>
            </tr>
            <tr v-for="(item, index) of list">
                <td width="200" height="160">{{item.name}}</td>
                <td width="200" height="160">{{getNameOfFirstCategory(item.firstCategory)}}</td>
                <td width="200" height="160">{{item.price}}</td>
                <td width="200" height="160">{{item.marketPrice}}</td>
                <td width="200" height="160">
                    <img v-if="item.img!=''" :src="item.img" class="img">
                </td>
                <td width="200" height="160"></td>
                <td width="200" height="160">
                    <button @click="onDeleteList(item.id)" class="delete">删除商品</button>
                </td>
            </tr>
        </table>
    </div>

    <script>
        const defaultGoods = { // 商品数据结构
            firstCategory: 0,
            secondCategory: 0,
            name: '',
            price: 0,
            marketPrice: 0,
            img: '',
            specs: 0,
            attribute: 0
        }
        new Vue({
            el: '#app',
            data: {
                goods: {...defaultGoods},
                list: [], //展示数据
                // 一级菜单
                firstCategory,
                // 二级菜单
                secondCategory: [],

                // 商品规格
                specs,
                attribute: []
            },
            methods: {
                onSelectCategory1(event) {
                    // 获取对应一级商品id
                    const id = parseInt(event.target.value)
                    // console.log(id)
                    // 如果选择了某个一级商品
                    if (id > 0) {
                        // 根据id获取一级分类
                        const category = this.firstCategory.find(item => item.id === id)
                        // 筛选出二级分类
                        this.secondCategory = category.children || []
                    } else {
                        // 清空二级分类
                        this.secondCategory = []
                    }

                },
                onSelectSpecs1(event) {
                    const id = parseInt(event.target.value)
                    if (id > 0) {
                        const category = this.specs.find(item => item.id === id)
                        this.attribute = category.children || []
                    } else {
                        this.attribute = []
                    }

                },
                judgeSubmit() {
                    if (this.goods.firstCategory != 0 &&
                        this.goods.secondCategory != 0 &&
                        this.goods.name != '' &&
                        this.goods.price != 0 &&
                        this.goods.marketPrice != 0 &&
                        this.goods.specs != 0 &&
                        this.goods.attribute != 0) {
                        return true
                    }
                    alert('请填写完整信息')
                    return false
                },

                addToList() {
                    if (this.judgeSubmit()) {
                        // data存储数据, 浅拷贝
                        const data = {...this.goods}
                        // 添加id
                        data.id = Date.now()
                        // 尾部插入
                        this.list.push(data)
                        // console.log(this.list)
                        // 重置表单
                        this.resetList()
                    }
                },

                resetList() {
                    this.goods = {...defaultGoods}
                },
                // 根据id获取一级分类的名称
                getNameOfFirstCategory(id){
                    return this.firstCategory.find(item => item.id === id)['name']
                },
                getNameOfSpecs(id){
                    return this.specs.find(item => item.id === id)['name']
                },
                // getNameOfArribute(id){
                //     return this.attribute.find(item => item.id === id)['name']
                // },
                onDeleteList(id) {
                    const index = this.list.findIndex(item => item.id === id)
                    this.list.splice(index, 1)
                }

            }
        })
    </script>
</body>

</html>

firstCategory.js

var firstCategory = [
    {
        id: 1,
        name: '手机',
        children: [
            {
                id: 11,
                name: 'iPhone'
            },
            {
                id: 12,
                name: 'XIAOMI'
            },
            {
                id: 13,
                name: 'HUWEI'
            },
            {
                id: 14,
                name: 'VIVO'
            },
            {
                id: 15,
                name: 'OPPO'
            }
        ]
    },
    {
        id: 2,
        name: '女包',
        children: [
            {
                id: 21,
                name: 'Alexendar'
            },
            {
                id: 22,
                name: 'Bvlgari'
            },
            {
                id: 23,
                name: 'Gucci'
            },
            {
                id: 24,
                name: 'Coach'
            },
            {
                id: 25,
                name: 'Diro'
            }
        ]
    },
    {
        id: 3,
        name: '羽绒服',
        children: [
            {
                id: 31,
                name: 'Canada Goose'
            },
            {
                id: 32,
                name: 'North Face'
            },
            {
                id: 33,
                name: 'Columbia'
            },
            {
                id: 34,
                name: 'Playboy'
            },
            {
                id: 35,
                name: 'Snowflying'
            }
        ]
    }
]

specs.js

var specs = [
    {
        id: 4,
        name: '颜色',
        children: [
            {
                id: 41,
                name: '石墨色'
            },
            {
                id: 42,
                name: '银色'
            },
            {
                id: 43,
                name: '金色'
            },
            {
                id: 44,
                name: '海蓝色'
            }
        ]
    },
    {
        id: 5,
        name: '尺寸',
        children: [
            {
                id: 51,
                name: 'S'
            },
            {
                id: 52,
                name: 'M'
            },
            {
                id: 53,
                name: 'XL'
            },
            {
                id: 54,
                name: 'XXL'
            }
        ]
    },
    {
        id: 6,
        name: '容量',
        children: [
            {
                id: 61,
                name: '64GB'
            },
            {
                id: 62,
                name: '128GB'
            },
            {
                id: 63,
                name: '256GB'
            },
            {
                id: 64,
                name: '512GB'
            }
        ]
    }
]
Logo

前往低代码交流专区

更多推荐