Vue原生写全选反选框

白嫖叫上我

已于 2024-06-26 12:49:22 修改

阅读量396

点赞数 10

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js 前端

于 2024-06-26 12:45:13 首次发布

本文链接：https://blog.youkuaiyun.com/daimaxiaodao/article/details/139986076

效果

场景：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