uniapp heckbox-group实现多选

最新推荐文章于 2024-07-24 10:28:16 发布

Cimbala

最新推荐文章于 2024-07-24 10:28:16 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： # 微信小程序开发文章标签： uni-app

本文链接：https://blog.csdn.net/cimbala/article/details/134461057

微信小程序开发专栏收录该内容

7 篇文章

订阅专栏

本文详细描述了一个使用Vue.js开发的应用，涉及HTML和JS代码，展示了如何实现可滚动视图和多选功能，包括checkbox-group组件，以及处理全选和选择特定经销商的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

混了业务逻辑，谨慎观看

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设为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]
			}
		},
	}
}