uni-app引入uni-popup弹出层插件以及列表复选框选中与取消

uni-popup 弹出层引入

基于 uni-app 的 UI 组件库

		<uni-popup ref="popup" type="center" :maskClick="false">
		    <view class="popup-project">
				<view class="title"><text>选择项目text>view>
				<view class="checkboxgroupBox">
					<scroll-view class="scroll-view_H" scroll-y="true">
						<checkbox-group name="checkbox" @change="checkboxChange">
							
							<view  v-for="(item,index) in deptProjectList" :key="index">
								<view class="proList uni-flex uni-row" @click="checkProject(item)">
									<checkbox :value="item.projectId" :checked="item.checked" /><text class="tite">{{item.projectName}}text>
								view>
								
							view>
						
							
						checkbox-group>
					scroll-view>
				view>
				<view class="uni-flex uni-row buttonBox">
					<button type="default" plain="true" size="mini" @tap="cancelPopup">取消button>
					<button type="primary" plain="true" size="mini" @tap="okPopup">确认button>
				view>
			view>
		uni-popup>

点击弹出层按钮：

//添加项目弹框
addProject () {
	//this.showTextArea = false;
	this.$refs['popup'].open();
	
	//每次弹框都把是否选中状态设置为false
	let initProjectList = this.deptProjectList;
	if(initProjectList.length > 0){
		for (let item of initProjectList) {
			item.checked = false;
		}
	}
	//与日报已经关联的项目列表，也就是之前选中过的，这里使用两层循环一 一比对进行回显
	let projectListAlready = this.reportDetails.tableData.dailyProjectList;
	for (let projectAlready of projectListAlready) {   // let ... of遍历出的结果是value, let ... in遍历出的结果是key

		for (let deptProject of initProjectList) {
			if(projectAlready.projectId == deptProject.projectId){
			
				deptProject.checked = true;  //已经与日报关联的项目 这里默认选中  
				break;
			}
		}
	}
	
},

勾选复选框事件处理方法：

复选框选中后，点击确认：

// 确认
okPopup: function() {

    //选中的item列表
	let selectedProject = [];
	for (let project of this.deptProjectList) {   // let ... of遍历出的结果是value, let ... in遍历出的结果是key
		if(project.checked){
			selectedProject.push(project);
		}
	}

	//this.reportDetails.tableData.dailyProjectList = selectedProject;  浅拷贝 会引发问题
	// 这里把实际最后选中的这些items赋值给data里面对应的属性
	this.reportDetails.tableData.dailyProjectList = JSON.parse(JSON.stringify(selectedProject));
	this.cancelPopup();
},

部分样式：

.uni-checkbox .uni-checkbox-input{
	width: 30upx;
	height: 30upx;
}

.addProject{
		font-size: 32upx;
		color: #363636;
		padding: 20upx 0 20upx 30upx;
		align-items: center;
		.iconfont{
			margin-right: 10upx;
		}
	}
	
	.project-list{
		.list{
			padding: 20upx 30upx;
			align-items: center;
			justify-content: space-between;
			color: #363636;
			text{
				font-size: 32upx;
			}
		}
		.progectname{
			align-items: center;
			font-size: 32upx;
			.iconfont{
				font-size: 32upx;
				margin-right: 10upx;
				color: red;
			}
		}
		.title{
			font-weight: bold;
			border-bottom: 2upx solid #f5f5f5;
		}
		.procon{
			border-bottom: 2upx solid #f5f5f5;
		}
	}
	
	
	.popup-project{
		background: #fff;
		width: 600upx;
		height: 800upx;
		position: relative;
		border-radius: 16upx;
		box-shadow: 0 0 20upx #5d5d5d;
		overflow-y: auto;
		.title{
			border-bottom: 2upx solid #f5f5f5;
			width: 100%;
			position: absolute;
			height: 80upx;
			line-height: 80upx;
			background-color: #fff;
			z-index: 10;
			text{
				font-size: 32upx;
				color: #363636;
				padding-left: 40upx;
			}
		}
		.checkboxgroupBox{
			padding-top: 80upx;
			height: 600upx;
			overflow-y: auto;
			.scroll-view_H{
				width: 100%;
				height: 100%;
			}
		}
		.proList{
			padding: 20upx 30upx;
			align-items: center;
			.tit{
				font-size: 32upx;
				color: #363636;
			}
		}
		.buttonBox{
			position: absolute;
			background-color: #fff;
			z-index: 10;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-bottom: 20upx;
		}
	}