用vue + element ui 实现购物车

最新推荐文章于 2024-06-18 09:03:15 发布

hhhhhhhlxl

最新推荐文章于 2024-06-18 09:03:15 发布

阅读量4.1k

点赞数 3

文章标签： vue.js css html

本文链接：https://blog.csdn.net/m0_46598424/article/details/120712225

版权

本文展示了如何利用Vue.js和ElementUI库创建一个购物车应用。通过示例代码，详细说明了如何设置表格展示商品，实现商品的添加、删除以及数量的增减，并实时计算购物车总价。此外，还包含了商品选择、删除操作等功能。

摘要由CSDN通过智能技术生成

使用vue + element ui实现购物车，效果如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <h1>我的购物车</h1>
        <el-card style="width: 1200px;">
            <el-tabs v-model="activeName">
                <!-- 购物车商品 -->
                <el-tab-pane label="全部商品" name="first">
                    <el-table :data="addedGoods" @select="handleSum" @select-all="handleSum" ref="multipleTable">
                        <!-- 复选框 -->
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="name" label="名称" width="180"></el-table-column>
                        <el-table-column label="数量" width="280">
                            <!-- 使用计数器来添加数量，绑定表格数据行对应的count -->
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.count" @change="handleSum" :min="1" :max="10"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="单价" width="180">
                            <template slot-scope="prices">
                                <span>￥{{prices.row.price}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额" width="180">
                            <template slot-scope="money">
                                <span>￥{{money.row.price*money.row.count}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin: 20px;">
                        总价：<span style="color: red;">￥{{sum}}</span>
                    </div>
                </el-tab-pane>
                <!-- 添加商品 -->
                <el-tab-pane label="添加商品" name="second">
                    <el-table :data="goods">
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column prop="price" label="单价"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleAdd(scope.$index)">添加</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                sum: 0,
                activeName: 'first',
                // 添加进购物车的商品数组
                addedGoods: [],
                // 设置的商品
                goods: [{
                    name: '手机',
                    price: 1000,
                    count: 1
                }, {
                    name: '电脑',
                    price: 2000,
                    count: 1
                }, {
                    name: '平板',
                    price: 3000,
                    count: 1
                }, {
                    name: '电视',
                    price: 4000,
                    count: 1
                }, {
                    name: '空调',
                    price: 5000,
                    count: 1
                }]
            },
            methods: {
                // 计算总额
                handleSum() {
                    this.sum = 0;
                    this.$nextTick(() => {
                        // console.log(this.$refs.multipleTable.selection);
                        // this.$refs.multipleTable.selection获取被选中的行
                        this.$refs.multipleTable.selection.forEach(item => {
                            this.sum += (item.price * item.count)
                        });
                    })
                },
                // 删除操作
                handleDelete(i) {
                    this.addedGoods.splice(i, 1);
                    this.handleSum();
                },
                // 添加操作
                handleAdd(i) {
                    let flag = false;
                    this.addedGoods.forEach(item => {
                        if (item.name == this.goods[i].name) {
                            item.count++;
                            flag = true;
                        }
                    })
                    if (!flag) this.addedGoods.push(this.goods[i]);
                }
            }
        })
    </script>
</body>

</html>

hhhhhhhlxl

关注

3
点赞
踩
40

收藏

觉得还不错? 一键收藏
1
评论
用vue + element ui 实现购物车

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购.
复制链接

扫一扫