用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, init

hhhhhhhlxl

4277人浏览 · 2021-10-11 21:28:24

hhhhhhhlxl · 2021-10-11 21:28:24 发布

使用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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^