antd-vue 复选框实现全选(跨页)
官方文档给了全选实例,说实话够用了,但是最近我新做了一个需求是跨页全选,打个比方,我在第一页全选了12条内容,然后到第二页拉新数据了,在选择第二页的一部分,然后我再回到第一页,取消掉几个,再来到第二页,全部选中,要实现的效果:首先选中的依旧选中,本页数据全部被选中时,全选框被选中。其实还好,但是我逻辑思维能力有点一般般,所以我还是写博客记下来吧,省的下次再用到相同思路。data:(){choose
·
官方文档给了全选实例,说实话够用了,但是最近我新做了一个需求是跨页全选,打个比方,我在第一页全选了12条内容,然后到第二页拉新数据了,在选择第二页的一部分,然后我再回到第一页,取消掉几个,再来到第二页,全部选中,要实现的效果:首先选中的依旧选中,本页数据全部被选中时,全选框被选中。其实还好,但是我逻辑思维能力有点一般般,所以我还是写博客记下来吧,省的下次再用到相同思路。
data:(){
choosePicArr:[],
plainOptions:[],//本页的所有checkbox的value
checkAll :false, //全选框状态
currentPagePick:[]//当前页面被选中的checkbox
},
methods:{
//每个复选框的绑定事件
onChange(choosePicArr){
var currentPickData = choosePicArr.filter(ele =>{ return this.plainOptions.includes(ele)})
this.checkAll = (currentPickData.length === this.plainOptions.length);
this.currentPagePick = this.$tool.clone(currentPickData)
},
//全选框的绑定事件
onCheckAllChange(e) {
var temp = this.choosePicArr
Object.assign(this, {
choosePicArr: e.target.checked ? this.plainOptions : [],
checkAll: e.target.checked,
})
this.currentPagePick =this.$tool.clone(this.choosePicArr)
if(this.choosePicArr.length){
this.choosePicArr.push(...temp)
}else{
this.choosePicArr = temp.filter(item => this.plainOptions.indexOf(item) == -1);
}
},
//判断是否本页被全部选中
IsCheckAll(){
for(let i = 0;i<this.plainOptions.length;i++){
if(!this.choosePicArr.includes(this.plainOptions[i])){
return false
}
}
return true
}
}
//template
<a-checkbox :checked="checkAll" @change="onCheckAllChange">本页全选</a-checkbox>
<a-checkbox-group @change="onChange" v-model="choosePicArr">
<a-list
:grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 6, xxl: 6 }"
:dataSource="images"
>
<a-list-item slot="renderItem" slot-scope="item">
<a-checkbox :value="item.id"></a-checkbox>
<a-card> </a-card>
</a-list-item>
</a-list>
</a-checkbox-group>
更多推荐
已为社区贡献1条内容
所有评论(0)