Vue原生写全选反选框

效果

场景:Vue全选框在头部,子框在v-for循环内部。
实现:点击全选框,所有子项选中,再次点击取消;子项全选中,全选框自动勾选,子项并未全选,全选框不勾选;已选和全选数量统计;
在这里插入图片描述

实现

#1. html

<div class="checkall" :class="isCheck?'active':''" @click="clickAll"></div><span>全选</span>

<div class="card" v-for="(item, index) in tableData" :key="index">
	<div class="checkitem" :class="item.isCheck?'active':''" @click="clickItem(item.id)"></div>
</div>

#2. js

data() {
   
    return {
   
      tableData: [],
      isCheck:false,
      Selected: 0,
      SelectAll: 0,
    }
  },
mounted:{
   
	this.init();
}
methods:{
   
	async init(){
   
		let res = await ...; //请求
		this.tableData = res.data
		this.SelectAll = res.data.length;
		this.tableData = this.tableData.map(item => {
   
			item.isCheck = false
			return item
		})
	},
	clickItem(id){
   
	  this.table
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值