订单的批量删除以及全选功能的实现

原创于 2025-05-19 19:23:37 发布 · 686 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

既然上一篇我们已经学会了数量加减器以及总价的计算，那么我们这一次，就更加专业一点点点，不光可以通过数量加减器计算总价，还能选择哪些商品是我们需要的，需要的我们才来计算总价，不需要的，我们就挪出我们的购物车。来吧，开干！！！

一、script部分

二、实现全选功能

1.利用v-model和@change实现单个商品的选中

2.遍历出商品信息

3.全选有关的函数

三、批量删除

1.利用v-model和@change实现多个商品的删除

这是我们最终需要实现的功能

一、script部分

 <script>
    var app = new Vue({
      el: '#app',
      data: {
        chooseAll: false,
        isdelete: false,
        goods: [
          { id: 1, name: '娃哈哈', price: 2, count:1, img: 'img/222.png', status: false },
          { id: 2, name: '可乐', price: 3, count:1, img: 'img/222.png', status: false },
          { id: 3, name: '牛奶', price: 5, count:1, img: 'img/222.png', status: false }
        ]
      },
      computed: {
        filterGoods() {
          return this.goods.filter(good => !this.isdelete || !good.status);
        }
      },
      methods: {
        handleChooseAll() {
          this.goods.forEach(good => {
            good.status = this.chooseAll;
          });
        },
        handleSingleChoose(good) {
          const allSelected = this.goods.every(good => good.status);
          this.chooseAll = allSelected;
        },
        handleDelete() {
          if (this.isdelete) {
            this.goods = this.goods.filter(good => !good.status);
            this.chooseAll = false;
          }
        },
		totalPrice:function(){
			var money = 0;
			for(var i=0,len=this.goods.length;i<len;i++)
			{
				if(this.goods[i].status===true){
					money +=this.goods[i].price*this.goods[i].count
				}
			}
			return money
		}
      }
    });
  </script>

二、实现全选功能

1.利用v-model和@change实现单个商品的选中

/* 
用复选框实现全选，不用radio正是因为我们可以选择也可以取消勾选我们的全选框，
而radio是单选框，不太方便 
*/
/*
id="chooseAll" 以及 for="chooseAll" 之前的文章讲过啦 功能就是点击全选文字时也能选中复选框
@change="handleChooseAll"  就是监听这个复选框，当发生改变时，就执行handleChooseAll函数
*/
/*
chooseAll：只有两个值 非true 则false 选中全选 则为true，反之为false；
handleChooseAll：将所有的商品的status，改为与 全选 一致的状态。当 全选 为true 那么每个
商品的status 无论是否被勾选 都要被改成true 即勾选状态;反之，无论商品是否被勾选 
所有商品的status都要被改成false 即未勾选状态
*/
<input type="checkbox" id="chooseAll" v-model="chooseAll" @change="handleChooseAll" />
<label for="chooseAll">全选</label>

2.遍历出商品信息

/*
:key="good.id": 唯一地标识每个商品，即便我们“删除”了某个商品，原商品的key都不会改变
*/

/*
v-model="good.status"：前两篇文章也讲过啦 v-model既有监听功能就能同步checked的值 也就是说
当选中商品的复选框后，v-model的值"good.status" 会随着checked的改变而改变 当勾选了
复选框，"good.status"的值就变成true(初始script里面会设置成false)

*/
/*
@change="handleSingleChoose(good)": 假设我们总共有五个商品，我们一直勾选到四个的时候，
全选(chooseAll)都是false 但当我们点击第五个商品时，全选 就为true 这里的函数就是实现这
个检查功能 
*/
<div v-for="good in goods" :key="good.id" class="shopp">
   <input type="checkbox" v-model="good.status" @change="handleSingleChoose(good)" />
   <div class="goods_content">
       <img :src="good.img" alt="商品图片" />
        <div class="content">
            {{ good.name }}<br>
            价格：{{ good.price }} 元
         </div>
		 <div class="numbers">
			  <!-- 简易数量加减器 -->
			  <button @click="good.count +=1">+</button>
			  <span>{{good.count}}</span>
			  <button @click="good.count -=1" v-bind:disabled="good.count===0">-</button>
		  </div>
    </div>
</div>

到这里，全选部分的介绍就做完了，接下来是全选部分具体函数的实现！！！

3.全选有关的函数

methods: {

  <!--this.goods.forEach() 对goods里的每一个good 修改good的status的值与全选(chooseAll)的
值相同  从而实现全部选中以及 取消全选(当全选为true 所有商品被选中 status为true 再点击一下全选 全选为false 所有商品的status为false 未被选中) -->
  handleChooseAll() {
      this.goods.forEach(good => {
      good.status = this.chooseAll;
          });
      },


   <!-- this.goods.every(good => good.status)：当goods里的每一个good都满足good.status为true时
    allSelected为true 反之为false
    故只有选中所有商品的时候 选中最后一个未选中的商品时 allSelected为true 此时 全选chooseAll 为            
    true 其它情况都为false
 -->
  handleSingleChoose(good) {
      const allSelected = this.goods.every(good => good.status);
      this.chooseAll = allSelected;
      },
}

三、批量删除

1.利用v-model和@change实现多个商品的删除

原理与逻辑同全选处，up就不重复啦

<input type="checkbox" id="isdelete" v-model="isdelete" @change="handleDelete" />
<label for="isdelete">删除</label>

2.删除函数

<!--  选中商品后勾选删除复选框: 当我们监听到 删除 复选框发生变化 且复选框处于
勾选状态 那么就从goods中过滤出未被勾选的商品赋值给goods 此时选中的商品已经被
删除了 页面只展示未被删除的商品信息   -->
handleDelete() {
     if (this.isdelete) {
         this.goods = this.goods.filter(good => !good.status);
         this.chooseAll = false;
          }
    },

四、总计函数

<!-- 这里与之前有点不同 多了一行if(this.goods[i].status===true) 此处是因为我们只需要计算选中了的商品的数量以及单价 没勾选的说明对该商品不满意 不用算~~~ -->
totalPrice:function(){
			var money = 0;
			for(var i=0,len=this.goods.length;i<len;i++)
			{
				if(this.goods[i].status===true){
					money +=this.goods[i].price*this.goods[i].count
				}
			}
			return money
		}

五、style样式展示

  <style>
    body {
      height: 100vh;
      width: 100vw;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #app {
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
    }
    .section1 {
      height: 50px;
      width: 100%;
      background: skyblue;
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 0 10px;
    }
    .section2 {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 10px 0;
    }
    .shopp {
      display: flex;
      flex-direction: row; /* 横向排列复选框、图片和文字 */
      align-items: start; /* 顶部对齐 */
      gap: 15px; /* 整体间距 */
      padding: 10px;
      background: #f8f8f8;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      width: auto;
      min-width: 300px;
    }
    .goods_content {
      display: flex;
	  align-items: center;
      flex-direction: row; /* 文字内容垂直排列 */
      gap: 5px; /* 文字间距 */
      flex: 1; /* 占据剩余空间 */
    }
    img {
      width: 100px;
      height: 100px;
      object-fit: cover;// 保证不变形 但可能会裁剪部分
      border-radius: 4px;
    }
    .content {
      font-size: 14px;
      color: #333;
    }
	.numbers{
		display:flex;
		gap: 15px;
		margin-left: 60%;
	}
  </style>

六、全部代码展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>商品列表</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <style>
    body {
      height: 100vh;
      width: 100vw;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #app {
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
    }
    .section1 {
      height: 50px;
      width: 100%;
      background: skyblue;
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 0 10px;
    }
    .section2 {
      display: flex;
      flex-direction: column;
      gap: 15px;
      padding: 10px 0;
    }
    .shopp {
      display: flex;
      flex-direction: row; /* 横向排列复选框、图片和文字 */
      align-items: start; /* 顶部对齐 */
      gap: 15px; /* 整体间距 */
      padding: 10px;
      background: #f8f8f8;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      width: auto;
      min-width: 300px;
    }
    .goods_content {
      display: flex;
	  align-items: center;
      flex-direction: row; /* 文字内容垂直排列 */
      gap: 5px; /* 文字间距 */
      flex: 1; /* 占据剩余空间 */
    }
    img {
      width: 100px;
      height: 100px;
      object-fit: cover;// 保证不变形 但可能会裁剪部分
      border-radius: 4px;
    }
    .content {
      font-size: 14px;
      color: #333;
    }
	.numbers{
		display:flex;
		gap: 15px;
		margin-left: 60%;
	}
  </style>
</head>
<body>
  <div id="app">
    <div class="section1">
      <input type="checkbox" id="chooseAll" v-model="chooseAll" @change="handleChooseAll" />
      <label for="chooseAll">全选</label>
      <input type="checkbox" id="isdelete" v-model="isdelete" @change="handleDelete" />
      <label for="isdelete">删除</label>
    </div>
    <div class="section2">
      <div v-for="good in goods" :key="good.id" class="shopp">
        <input type="checkbox" v-model="good.status" @change="handleSingleChoose(good)" />
        <div class="goods_content">
          <img :src="good.img" alt="商品图片" />
          <div class="content">
            {{ good.name }}<br>
            价格：{{ good.price }} 元
          </div>
		  <div class="numbers">
			  <!-- 简易数量加减器 -->
			  <button @click="good.count +=1">+</button>
			  <span>{{good.count}}</span>
			  <button @click="good.count -=1" v-bind:disabled="good.count===0">-</button>
		  </div>
        </div>
      </div>
	  
	  <h1>总价：{{totalPrice()}}</h1> <!-- vue2调用函数 -->
	  
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        chooseAll: false,
        isdelete: false,
        goods: [
          { id: 1, name: '娃哈哈', price: 2, count:1, img: 'img/222.png', status: false },
          { id: 2, name: '可乐', price: 3, count:1, img: 'img/222.png', status: false },
          { id: 3, name: '牛奶', price: 5, count:1, img: 'img/222.png', status: false }
        ]
      },
      computed: {
        filterGoods() {
          return this.goods.filter(good => !this.isdelete || !good.status);
        }
      },
      methods: {
        handleChooseAll() {
          this.goods.forEach(good => {
            good.status = this.chooseAll;
          });
        },
        handleSingleChoose(good) {
          const allSelected = this.goods.every(good => good.status);
          this.chooseAll = allSelected;
        },
        handleDelete() {
          if (this.isdelete) {
            this.goods = this.goods.filter(good => !good.status);
            this.chooseAll = false;
          }
        },
		totalPrice:function(){
			var money = 0;
			for(var i=0,len=this.goods.length;i<len;i++)
			{
				if(this.goods[i].status===true){
					money +=this.goods[i].price*this.goods[i].count
				}
			}
			return money
		}
      }
    });
  </script>
</body>
</html>