vue3 全选 以及取消全选功能_element vue3 checkbox 全选

首先引用elementplus的模板checkbox多选框

 

（不需要indeterminate状态） 

具体需要实现的功能有：

1.点击全选按钮 所有的小框框都是选中状态

2.当为选中状态时，点击任意条例选中框取消选中状态，则全选也随之取消

3.当手动一个一个将下面的条例选中 全部的条例都是选中状态时 全选自动是选中状态

具体效果图如下

大概思路：

准备两个数组 放数据的id（因为id是唯一的 可以用id判断）

一个将所有数据的id都放进去（checkAmount） 另一个将选中的id放进去（checkedAmount）

通过判断二者是否完全相等来判断是否全选

//获取列表数据的时候将其循环进checkAmount数组 表示全部数据
.then((res) => {
          res.data.forEach((item: any) => {
            item.list.forEach((i: any) => {
              checkAmount.value.push(i.id)
              i.flag = false //每一个都绑定一个flag来判断有没有被选中  默认为false
            })
          })       
        })

<div class="select-all">
          <el-checkbox
            v-model="checkAll"
            @change="handleCheckAllChange"
            class="checkbox"
            >全选</el-checkbox>
        </div>

<div class="list-content" v-for="(i, k) in item.list" :key="k">
        <el-checkbox
          class="checkbox"
          v-model="i.flag"
          @change="handleCheckedCitiesChange(i)"
        ></el-checkbox>
        {{i.name}}
</div>

具体代码

    const checkAll = ref(false)
    //定义数据类型
    interface IAmount {
      id?: string
      download?: string
      [key: string]: any
    }
    const checkedUrl = ref<IAmount[]>([])//被选中的url组成的数组 用来写批量下载
    const handleCheckAllChange = (val: boolean) => {
      if (val) {
        //如果是全选的则val返回为true  则令checkAmount数组里的值全部赋给checkedAmount
        checkedAmount.value = JSON.parse(JSON.stringify(checkAmount.value))
        //这行是为了写批量下载 
        checkedUrl.value = JSON.parse(JSON.stringify(checkAmount.value))
        //如果是全选的 将数据循环让flag全部变为true
         allList.data.forEach((item: any) => {
          item.list.forEach((i: any) => {
            i.flag = true
          })
        })
      } //如果为false则表示 全不选
       else { 
       //那么令checked数组为空
        checkedAmount.value = []
        checkedUrl.value = []
       //循环让flag都变为false
        allList.data.forEach((item: any) => {
          item.list.forEach((i: any) => {
            i.flag = false
          })
        })
      }
    }
    const handleCheckedCitiesChange = (i: any) => {
      //用indexof来检测 被选中的数组里面是否已有现在点击的这条的id
      let checkedIndex = checkedAmount.value.indexOf(i.id)
      //返回-1表示 无 则把该条的id push进数组并令flag为true
      if (checkedIndex == -1 && i.flag) {
        checkedAmount.value.push(i.id)
        checkedUrl.value.push(i.download)
      } else {
        //如果有的话checkindex返回所在的index 当本来选中又取消时就需要把此条数据删除
        //此时正好用splice 要把本来在里面的所在的index的id从数组里删除
        checkedAmount.value.splice(checkedIndex, 1)
        checkedUrl.value.splice(checkedIndex, 1)
      }
      //当两个数组长度相等时 checkALL为true 全选成功
      checkAll.value = checkedAmount.value.length === checkAmount.value.length
    }