【项目】UniApp实战多端企业网盘全栈开发 14 多选操作开发【三】全选和取消全选

系统管理员 2024-03-22 14:55 79阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  14 多选操作开发【三】全选和取消全选

![在这里插入图片描述][7f9103f19acf4baf995b0d58ea75871c.png_pic_center]

##### 14 多选操作开发【三】全选和取消全选 #####

`index.vue`

<template v-else>
    				<view slot='left' class="font-md ml-3 text-primary" @click="handleCheckAll(false)">取消</view>
    				<text class="font-md font-weight-bold">已选中{
       {checkCount}}个</text>
    				<view slot='right' class="font-md mr-3 text-primary" @click="handleCheckAll(true)">全选</view>
    			</template>

点击事件方法：

// 全选/取消全选
    			handleCheckAll(checked) {
        
    				this.list.forEach(item => {
        
    					item.checked = checked
    				})
    			}

效果

![在这里插入图片描述][ab1e3f9f40d54d0396aae28682241486.png_pic_center]

点击全选

![在这里插入图片描述][7038e9736ea7428881e1de67cbd4508a.png_pic_center]

取消全选

![在这里插入图片描述][826249fb16f1445f86a92c70d4f7c6b7.png_pic_center]

没问题。

[7f9103f19acf4baf995b0d58ea75871c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/31b38db741ba44749547a0f9fc3f1db2.png
[ab1e3f9f40d54d0396aae28682241486.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c74f1510533a4a2e8d70857e082d0c60.png
[7038e9736ea7428881e1de67cbd4508a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f855489033f543deb35f65bdc0cfe7f0.png
[826249fb16f1445f86a92c70d4f7c6b7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fa7a88a3e1dd4168a2b85bb0c0cad95d.png