lovecoding
/
W250913


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <style>
        .navbar-brand {
            color: white;
        }

        .search-box {
            width: 400px;
        }

        .add-box {
            width: 600px;
        }

        .active {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <nav class="navbar bg-primary mt-3" data-bs-theme="dark">
                <div class="container-fluid">
                    <span class="navbar-brand mb-0 h1">商品管理</span>
                </div>
            </nav>
            <div class="row search-box my-3">
                <div class="col-8">
                    <input v-model="searchName" type="text" class="form-control" placeholder="请输入商品名称"
                        aria-label="First name">
                </div>
                <div class="col-4">
                    <button @click="searchFun" type="button" class="form-control btn btn-primary">搜索</button>
                </div>
            </div>
            <div class="input-group mb-3 add-box">
                <input v-model="goodsName" type="text" class="form-control" placeholder="请输入商品名称"
                    aria-label="Recipient's username" aria-describedby="button-addon2">

                <input v-model="goodsPrice" type="text" class="form-control" placeholder="请输入商品价格"
                    aria-label="Recipient's username" aria-describedby="button-addon2">

                <button @click="addFun" class="btn btn-outline-secondary" type="button" id="button-addon2">添加</button>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">#</th>
                        <th scope="col">商品名称</th>
                        <th scope="col">商品价格</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr @click="checkLine(item.id)" :class="{'active':item.isCheck}" v-for="(item,index) in tableData" > -->
                    <tr @click="item.isCheck = !item.isCheck" :class="{'active':item.isCheck}"
                        v-for="(item,index) in tableData">
                        <th scope="row">{{index+1}}</th>
                        <td>
                            <input type="checkbox" :checked="item.isCheck">
                        </td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <th>
                            <button @click.stop="delSingle(item.id)" type="button"
                                class="btn btn-primary btn-sm">删除</button>
                        </th>
                    </tr>
                    <tr>
                        <th scope="row" colspan="3">总价</th>
                        <td>{{totalPrice}}</td>
                        <td>
                            <button @click="delCheck" type="button" class="btn btn-primary btn-sm">删除选中</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let _data = [
            {
                id: 1001,
                name: "衣服",
                price: 100,
                isCheck: false
            },
            {
                id: 1002,
                name: "裤子",
                price: 200,
                isCheck: false
            },
            {
                id: 1003,
                name: "帽子",
                price: 50,
                isCheck: false
            },
            {
                id: 1004,
                name: "鞋",
                price: 300,
                isCheck: false
            }
        ]
        new Vue({
            el: '#app',
            data: {
                tableData: _data,
                searchName: "",
                goodsName: "",
                goodsPrice: ""
            },
            computed: {
                // 计算选中商品的总价
                totalPrice() {
                    let total = 0;
                    // 1. 先筛选出选中的商品
                    this.tableData.forEach((item) => {
                        if (item.isCheck) {
                            total += item.price;
                        }
                    });
                    // 2. 返回总价
                    return total;
                }
            },
            methods: {
                // 删除选中商品
                delCheck(){
                    let newData = this.tableData.filter((item) => {
                        return !item.isCheck
                    })
                    this.tableData = newData;
                },
                //删除单个商品
                delSingle(id) {
                    let newData = this.tableData.filter((item) => {
                        return item.id != id;
                    })
                    this.tableData = newData;
                },
                // 搜索
                searchFun() {
                    // 过滤数组中符合条件的元素
                    let newData = _data.filter((item) => {
                        if (item.name.indexOf(this.searchName) != -1) {
                            return true
                        }
                    })
                    this.tableData = newData;
                },
                // 添加商品
                addFun() {
                    // 1. 先判断商品名称和商品价格是否为空
                    if (this.goodsName == "" || this.goodsPrice == "") {
                        console.log("请输入商品名称和商品价格")

                    } else {
                        let newGood = {
                            id: _data[_data.length - 1].id + 1,
                            name: this.goodsName,
                            price: this.goodsPrice,
                            isCheck: false
                        }
                        // 2. 添加商品
                        this.tableData.push(newGood)
                        // 3. 清空输入框
                        this.goodsName = ""
                        this.goodsPrice = ""
                    }


                },
                // 单行选中
                checkLine(id) {
                    console.log(id);
                    // 根据id值进行匹配修改isCheck
                    let newData = this.tableData.map((item) => {
                        if (item.id == id) {
                            item.isCheck = !item.isCheck
                        }
                        return item;
                    })
                    this.tableData = newData;
                }
            }
        })

    </script>
</body>

</html>