uniapp heckbox-group实现多选

html 代码

<view><!--可滚动视图区域。用于区域滚动 --><scroll-view :style="{ height: clientHeight + 'px' }" :scroll-top="scrollTop" scroll-y="true"@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"><!--多项选择器--><checkbox-group @change="checkboxChange"><!-- 多内容pendingList 卡片 --><view v-for="(item, index) in pendingList" :key="index"><uni-card :title="item.deliveryCode" :extra="item.dbilldate.substring(0,10)"><view class="checkbox_collapse"><!--多选项目 checkbox 和 view同级--><!-- value绑定的值；checked当前是否选中，可用来设置默认选中 --><checkbox :value="item.checkboxValue" :checked="item.checked" color="#1d99ff" /><view style="margin-left: 10px;width: 100%;"><view v-for="(array,index3) in item.detail" :key="index3"><u-row><u-col span="1" v-if="item.detail.length > 1">{{index3+1}}</u-col><u-col span="11"><view class="uni-body order_detail_product_name">{{array.materialName}}{{array.castUnit}}</view><view class="uni-body order_detail_product_name"><text style="color: #5d5d5d;">订单：</text>{{array.saleCode}}</view><view class="uni-body order_detail_product_name bottom-border"><text style="color: #5d5d5d;">单项金额：</text>￥{{array.norigtaxmny}}</view></u-col></u-row></view><view class="order_detail"><view style="color: black;">￥{{item.totalPrice}}</view></view></view></view></uni-card></view></checkbox-group></scroll-view><view class="foot_view"><u-row><u-col><u-row><u-col span="5" class="foot_view_checkbox"><!--全选选择器--><checkbox-group placement="column" @change="groupChange"><checkbox :value="allRadio.name" :checked="allRadio.checked" color="#1d99ff"style="margin-left: 25px;">全选</checkbox></checkbox-group></u-col><u-col span="9" justify="end"><view class="foot_view_but_box"><button type="primary" class="foot_view_but" @click="submitTicket">提交申请</button></view></u-col></u-row></u-col></u-row></view>
</view>

JS 代码

export default {name: "pending",data() {return {pendingList: [],scrollTop: 0,allRadio: { name: '全选',checked: false},selectPending: [], //选中的经销商数据selectPendingCode: [],//选中的出库单编号和订单编号数据dealerRadio: false, //选择开票客户和发票类型对话框dealerRadioList: [], //开票客户selectDealerRadio: '', //对话框中选择的经销商totalAmount: 0,//总金额showDealerRadio: false, // 开票客户对话框}},methods: {checkboxChange(e) {this.totalAmount = 0 //总金额this.selectPending = [] //选中的经销商数据this.selectPendingCode = []//选中的出库单编号和订单编号数据let dealerList = new Set() //这步业务需要，过滤重复经销商//  e.detail.value是checkbox选中的值："XC2022121000000002-SO302022121000000001"let selectData = e.detail.value//pendingList循环的数据for (var i = 0, lenI = this.pendingList.length; i < lenI; ++i) {const item = this.pendingList[i]//判断selectData和pendingList.checkboxValue是否相等，相等则把checked设为trueif (selectData.includes(item.checkboxValue)) {this.$set(this.pendingList[i], 'checked', true)} else {this.$set(this.pendingList[i], 'checked', false)}}//  商品是否全部勾选，判断全选与否状态var offCarArr = []//this.pendingList.whether 属性值是true，则把itempush到offCarArrthis.pendingList.forEach(item => item.whether == true ? offCarArr.push(item) : '')//offCarArr的checked都是true，则allChecks = true,否则反之//every 若有一个不满足条件，则返回false，后面的元素都不会再执行。不会对空数组进行检测，不会改变原始数组let allChecks = offCarArr.every(item => item.checked == true)//如果allChecks等于true就反allRadio改为选中状态allChecks ? this.$set(this.allRadio, 'checked', true) : this.$set(this.allRadio, 'checked', false)//往dealerList添加经销商数据for (let ii in selectData) {this.selectPendingCode.push(selectData[ii])const temp = selectData[ii].split('-')for (let i in this.pendingList) {if (temp[0] === this.pendingList[i].deliveryCode) {this.totalAmount += this.pendingList[i].totalPricefor (let j in this.pendingList[i].detail) {let item = this.pendingList[i].detail[j]const str = item.invoiceCustCode + '-' + item.invoiceCustNamedealerList.add(str)}}}}this.selectPending = [...dealerList]},groupChange(n) {//全选按钮是否选中if (n.detail.value.length == 0) { //未选中this.pendingList.map(item => this.$set(item, 'checked', false))this.$set(this.allRadio, 'checked', false)//清空业务数据this.totalAmount = 0this.selectPending = []this.selectPendingCode = []} else {// 选中for (var i in this.pendingList) {this.$set(this.pendingList[i], 'checked', true)}this.$set(this.allRadio, 'checked', true)//清空业务数据this.totalAmount = 0this.selectPending = []this.selectPendingCode = []let dealerList = new Set()//往dealerList添加经销商数据for (let i in this.pendingList) {if (this.pendingList[i].checked) {this.selectPendingCode.push(this.pendingList[i].checkboxValue)this.totalAmount += this.pendingList[i].totalPricefor (let j in this.pendingList[i].detail) {let item = this.pendingList[i].detail[j]const str = item.invoiceCustCode + '-' + item.invoiceCustNamedealerList.add(str)}}}this.selectPending = [...dealerList]}},}
}