小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选

我是结合的vant weapp的checkbox实现的,less代码我就不给了

index.wpy

<view class="item"><van-checkbox-group value="{{ checked }}" bind:change="onChange"><van-row custom-class="padding-list" v-for="list,index in materailList"><van-col span="2"><van-checkbox name="{{ list.id }}"></van-checkbox></van-col><van-col span="14">{{list.materail_name}}</van-col><van-col span="4">{{list.materail_brand}}</van-col><van-col span="4">{{list.status}}</van-col></van-row></van-checkbox-group><van-row custom-class="padding-list"><van-col span="24"><van-checkbox value="{{ checkedAll }}" bind:change="allChecked">导出全部</van-checkbox></van-col></van-row>
</view>

index.js

import wepy from '@wepy/core';wepy.page({data: {active: 0,checked:[],checkedAll:false,materailList:[{id:1001,materail_name:"卫生间仿古砖瓷砖800*800 x 80块",materail_brand:"鹰牌",status:"无货",isChecked:false},{id:1002,materail_name:"卫生间仿古砖瓷砖800*800 x 80块",materail_brand:"鹰牌",status:"有货",isChecked:false},{id:1003,materail_name:"卫生间仿古砖瓷砖800*800 x 80块",materail_brand:"鹰牌",status:"无货",isChecked:false}]},methods: {onChange(event) {this.checked = event.$wx.detail;if(this.checked.length == this.materailList.length)this.checkedAll=true;elsethis.checkedAll=false;},changeTabbar(event){this.active = event.$wx.detail;},allChecked(event){/* 全选功能 */this.checked = this.materailList.map(item=>{return item.id.toString()})this.checkedAll=event.$wx.detail;if(this.checkedAll === false)this.checked = []}},onLoad() {}
})

主要的实现思路是，当你点击全选按钮时，遍历你的数据，在这儿也就是materailList，把每一项的id都放进this.checked数组中，这样就实现全选了。

这儿还实现了反选以及当其中有一个未选中时即全选状态不选中的效果。

希望能帮助到你们，有疑问的欢迎下方评论。

小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选相关推荐

vant weapp 多选上传图片_小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选...
我是结合的vant weapp的checkbox实现的,less代码我就不给了 index.wpy {{list.materail_name}} {{list.materail_brand}} {{l ...
微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
小程序安装Vant Weapp详细步骤,下载和npm安装版
小程序安装Vant Weapp详细步骤使用npm下载 1.新建项目并初始化项目 2.下载Vant Weapp 3.修改 app.json 4.构建 npm 包 5.引入组件下载方式 1. npm下 ...
微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的第一步首先你要有一个构建npm的项目还不知道构建npm的小伙 ...
小程序结合Vant Weapp实现多张图片的上传和预览
前言: 不太懂为啥Vant Weapp的官方文档明明可以写全代码,却只放了一部分出来,关于云开发的案例也是写得蛮晦涩难懂的,参考了以下的文档: 云开发能力基础讲解小程序官方文档wx.cloud.up ...
微信小程序引用vant Weapp
vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/qu ...
vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家效果图创建一个图片上传的p ...

小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选

小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选相关推荐

最新文章

热门文章