vue + css关于table的删除和全选

脑袋空白的此刻
已于 2022-06-12 22:08:50 修改
阅读量367
点赞数
文章标签： css html
于 2022-06-12 22:05:08 首次发布
本文链接：https://blog.csdn.net/qq_46058550/article/details/125250788
版权
1.界面如图
在这里插入图片描述
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>



        html,body {
            height: 100%;

            color: #00FF00;
        }
        body{


            background: url(https://s1.ax1x.com/2020/07/30/ansR4x.jpg)center center;
            background-size: cover;

        }

        a {
            color: #c75f3e;
        }

        #mytable {
            width: 700px;
            padding: 0;
            margin: 0;
        }

        caption {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }

        th {
            font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 100px 100px 5px 100px;
            background: wheat  no-repeat;
        }



        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            font-size:11px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }


        p{
            font-size: 20px;
            color: black;
        }
        input{
            width: 40px;
        }

        .myButton {
            box-shadow:inset 0px 1px 0px 0px #bbdaf7;
            background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
            background-color:#79bbff;
            border-radius:20px;
            border:1px solid #84bbf3;
            display:inline-block;
            cursor:pointer;
            color:#ffffff;
            font-family:Arial;
            font-size:15px;
            font-weight:bold;
            padding:6px 24px;
            text-decoration:none;
            text-shadow:0px 1px 0px #528ecc;
        }
        .myButton:hover {
            background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
            background-color:#378de5;
        }
        .myButton:active {
            position:relative;
            top:1px;
        }

        .del{
                color: orangered;
        }



    </style>
    <script src="vue_te/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<table id ="mytable"  align="center" valign="center" >
    <tr>
        <th scope="col">全选<input type="checkbox" id="select_all" @click="all"  :checked="all_checked"></th>
        <th scope="col" >商品id</th>
        <th scope="col">商品名</th>
        <th scope="col">商品单价(元/kg)</th>
        <th scope="col">购买数量</th>
        <th scope="col">操作</th>
    </tr>

    <tr class="g" v-for="(item,index) in clothes">
        <td ><input type="checkbox" @click="one_checked(index)"  :checked="item.isChecked" class="select_one" ></td>
        <td >{{item.id}}</td>
        <td >{{item.name}}</td>
        <td >{{item.price}}</td>
        <td class="option">
            <button @click = "decrement(index)" style = "font-size:15px;">-</button>
            <input type="text"  @keyup.enter="result" v-model="count[index]">
            <button @click = "plus(index)" style = "font-size:15px;">+</button>
        </td>
        <td class="option"><button class="del" @click="del(index)">删除</button></td>
    </tr>

</table>
    <p v-model="totalPrice">总计：{{totalPrice}} 元</p>
<button class="myButton"  @click="end(true)">结算</button>
</div>
    <script>
        let tab= new Vue({
            el:"#app",
            data:{
                count:[0,0,0,0],
                totalPrice:0,
               all_checked:false,
                clothes:[
                    {id:1,name:"耐克",price:100,isChecked:false},
                    {id:2,name:"鸿星尔克",price:90,isChecked:false},
                    {id:3,name:"安踏",price:60,isChecked:false},
                    {id:4,name:"特步",price:30,isChecked:false},
                ],


            },
            methods:{
                //数量+1 需要计算价格
                plus: function (index) {
                    if (this.count[index]>=100){
                        alert("数量只有"+this.count[index])
                    }else {
                        this.count[index]++;
                    }

                    // 在vm实例上通知
                    // 监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view；解决方案就是，需要我们主动通知vue；
                    tab.$set(this.count,3,this.count[3]);
                    this.end(false);

                },
                //数量-1
                decrement:function (index) {
                    if (this.count[index]<=0){
                        alert("数量不能小于0")
                    }else {
                        this.count[index]--;
                    }
                    //百度的 就是手动检测数组 要不然检测不到
                    tab.$set(this.count,3,this.count[3]);
                    this.end(false);
                },
                end:function (isTrue) {
                    //有个小bug 结算一次之后 要清空上一次totalPrice 数据
                    this.totalPrice =0;
                    //计算总价格
                    for (let i = 0; i <this.clothes.length ; i++) {
                        this.totalPrice += this.count[i] * this.clothes[i].price;
                    }
                    if (isTrue) {
                        //只在结算时弹出
                        alert("一共"+this.totalPrice+"元")
                    }

                },
                del:function (id) {
                    this.clothes.splice(id,1)
                //    删除完这个之后也要把count所对应的删除
                    this.count.splice(id,1)
                },
                //全选引发的单选
                all: function () {
                    //因为没有动态绑定 所以要取相反 自己绑定
                    this.all_checked = !this.all_checked;
                    for (let i = 0; i <this.clothes.length ; i++) {
                        //全选为true 则单选全部为true
                        if (this.all_checked){
                            this.clothes[i].isChecked =true;
                        }else {
                            this.clothes[i].isChecked =false;
                        }

                    }
                },
               // 单选引发的全选
               one_checked: function (index){
                   // 因为没有动态绑定 所以要取相反 自己绑定
                   this.clothes[index].isChecked = !this.clothes[index].isChecked
                    let temp=0;
                   let judge;
                    //所有的都为true
                    for (let i = 0; i <this.clothes.length ; i++) {
                        if (this.clothes[i].isChecked){
                            temp ++;
                        }
                    }
                    if(temp===this.clothes.length){
                        this.all_checked=true;
                    }else {
                        // 要手动取消全选
                        this.all_checked=false;
                        return false;
                    }
                }


            }
        });


    </script>
</body>
</html>