uni-app 购物车全选案例

首先可以看下： 购物车小案例

        如果选中全部的商品，那么最下面的全选按钮也会选中；如果有没有选中的商品，最下面的全选按钮不会被选中；如果你直接选中全选按钮，上面的商品也会被选中，取消全选按钮，上面的商品也会全部取消

 html代码

		
			
				
				
                
				
			
			
				全选
			
		

methods实现

        先过滤出status为true的商品，放到一个新数组中，然后判断新数组的长度是否与原数组的长度相等，

        如果相等，说明全部商品都被选中，那么最下面的全选按钮也要选中，就把allStatus的值改为false，然后给原数组中的每个status也要赋值为false

data() {
			return {
				num: 0,
				list: [{
					name: '奥特曼1',
					num: 6,
					price: 50,
					id: 1,
					status: false,
				}, {
					name: '奥特曼2',
					num: 5,
					price: 30,
					id: 2,
					status: false,
				}, {
					name: '奥特曼3',
					num: 8,
					price: 16,
					id: 3,
					status: false,
				}],
				allStatus:false
			}
		},
		methods: {
			toggleStatus(item, index) {
				arr.length==this.list.length?this.allStatus=true:this.allStatus=false
			},

			allSelect(){
				let arr = this.list.filter(item=>item.status)
				if (arr.length != this.list.length) {
					this.allStatus=true
					this.list.forEach(item=>item.status =true)
				} else{
					this.allStatus=false
					this.list.forEach(item=>item.status =false)
				}
				
			}
			
		},
		
		

computed实现

        利用计算属性，也是判断新数组的长度与原数组的长度是否相等，相等就全选按钮亮

  every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

        也就是判断list中的status是否都为true，然后给flag取反，那就是false，遍历给list数组

methods: {
			allSelect(){
				let flag = this.list.every(item=>item.status)
				this.list.forEach(item=>item.status =!flag)
			}
		},
computed:{
				allSelected(){
					let arr = this.list.filter(item=> item.status)
					return arr.length==this.list.length
					//也可以这么写
					// return this.list.every(item=>item.status)
				}
		},