vue3 全选 以及取消全选功能
首先引用elementplus的模板checkbox多选框具体需要实现的功能有:1.点击全选按钮 所有的小框框都是选中状态2.当为选中状态时,点击任意条例选中框取消选中状态,则全选也随之取消3.当手动一个一个将下面的条例选中 全部的条例都是选中状态时 全选自动是选中状态具体效果图如下大概思路:准备两个数组 放数据的id(因为id是唯一的)一个将所有数据的id都放进去 另一个将选中的id放进去通过判
·
首先引用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
}
更多推荐
已为社区贡献3条内容
所有评论(0)