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">
			
			<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 :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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

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设为true
				if (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到offCarArr
			this.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].totalPrice
						for (let j in this.pendingList[i].detail) {
							let item = this.pendingList[i].detail[j]
							const str = item.invoiceCustCode + '-' + item.invoiceCustName
							dealerList.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 = 0
				this.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 = 0
				this.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].totalPrice
						for (let j in this.pendingList[i].detail) {
							let item = this.pendingList[i].detail[j]
							const str = item.invoiceCustCode + '-' + item.invoiceCustName
							dealerList.add(str)
						}
					}
				}
				this.selectPending = [...dealerList]
			}
		},
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103