vue循环渲染复选框列表

<div v-loading='loading' v-show="isShow">
			<div class="plan-box">
				<div class="plan" v-for="item in cities" :key="item.id">
					<label class="label-plan">
						<input type="checkbox" id="" :value="JSON.stringify(item)" class="ipt">
					</label>
					<div class="plan-right">
						<div class="item">
							<span>设备模块</span>
							<p>{{item.moduleName}}</p>
						</div>
						<div class="item">
							<span>项目名称</span>
							<p>{{item.fPartName}}</p>
						</div>
						<div class="item">
							<span>点检频率(天)</span>
							<p>{{item.cycle}}</p>
						</div>
						<div class="item">
							<span>点检方法</span>
							<p>{{item.fMethod}}</p>
						</div>
						<div class="item">
							<span>内容和标准</span>
							<p>{{item.fContent}}</p>
						</div>
						<div class="item">
							<span>异常处理</span>
							<p>{{item.fException}}</p>
						</div>
						<div class="item">
							<span>状态</span>
							<br />
							<select id="mySelect" v-model="item.fStatus">
								<option value="0">OK</option>
								<option value="1">NG</option>
							</select>
						</div>
						<div class="item">
							<span>备注</span>
							<br />
							<textarea v-model="item.fRemark"></textarea>
						</div>
					</div>
				</div>

			</div>
			<div class="boxBottom">
				<label>
					<input @change="selectAll" type="checkbox" style="margin-left:30px">
					<span class="quanxuan">全选</span>
				</label>
				<div class="boxButton">
					<el-button type="mini" @click="addParts()">备件更换</el-button>
					<el-button type="mini" @click="submitForm('ruleForm',0)">保存</el-button>
					<el-button type="mini" @click="submitForm('ruleForm',1)" style="background: #409EFF;color: white;">
						提交
					</el-button>
				</div>

			</div>

		</div>
--------------------------------------------
data() {
	return {
         checkedCities: [],
	 cities: [],
         isShow: true,
        }
}

方法中：
// 根据设备查询点检项目
			GetPlanByDeviceSN() {
				this.loading = true;
				// 调用封装好的get请求
				this.$http.getForm('api/DeviceSpotCheckRecord/GetMaintainItemsByDevice', {
					params: {
						DeviceSN: this.deviceSN,
					}
				}).then(response => {
					this.loading = false;
					if (response.state == '0') { //请求成功
						if (response.data == null || response.data == '') {
							this.cities = []
							return
						}
						this.cities = response.data;
						// console.log('this.cities', this.cities)

						let arr = []
						for (let i = 0; i < this.cities.length; i++) {
							this.cities[i].fStatus = '0';
							if (this.cities[i].isSave == 1) {
								arr.push(this.cities[i])
							}
						}
						this.checkedCities = arr;
						this.handleChecked(arr)
						this.GetDeviceMaintainRecordList()
					} else {
						alert(response.message)
					}
				})
			},

handleChecked(data) { //保存选中效果
				this.$nextTick(() => {
					let checklist = document.querySelectorAll('.ipt')
					for (const iterator of checklist) {
						let item = JSON.parse(iterator.value)
						for (const key of data) {
							if (item.id == key.id) {
								iterator.checked = true
							}
						}
					}
				})
			},
selectAll(event) { //全选、反选
				let value = event.target.checked
				let checklist = document.querySelectorAll('.ipt')
				if (value) {
					for (var i = 0; i < checklist.length; i++) {
						checklist[i].checked = true
					}
				} else {
					for (var i = 0; i < checklist.length; i++) {
						checklist[i].checked = false
					}
				}
			},
// 提交
			submitFormOK() {
				
				//选中的数组
				//   let arr = this.cities.filter(item => this.checkedCities.some(ele => ele === item.id))
				let checklist = document.querySelectorAll('.ipt') //提交时获取已选择的项
				let arr = []
				for (let index = 0; index < checklist.length; index++) {
					if (checklist[index].checked) { //获取true
						arr.push(JSON.parse(checklist[index].value))
					}
				}
}
------------------------------------------
<style scoped>
	div {
		box-sizing: border-box;
	}

	.plan-box {
		padding: 10px;
	}

	.plan {
		 100%;
		min-height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		border: 1px solid #eee;
		border-radius: 3px;
	}

	.plan label {
		 60px;
		min-height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.plan .plan-right {
		 calc(100% - 60px);
		min-height: 80px;
		display: flex;
		flex-wrap: wrap;
	}

	.plan-right .item {
		/* display: flex;
  align-items: center; */
		 25%;
		/* margin-right: 40px; */
		font-size: 14px;
		padding: 5px;
	}

	.plan-right .item span {}

	.plan-right .item p {
		background: #f9f9f9;
		padding: 6px 10px;
		border-radius: 3px;
		margin-left: 6px;
		min- 40px;
		/* height: 36px; */
		/* line-height: 36px; */
		margin: 0;
		color: #666;
	}

	.plan-right .item select {
		 80px;
		height: 30px;
		background: #f9f9f9;
		border-radius: 3px;
		outline: none;
		margin-top: 3px;

	}

	.plan:last-child {
		margin-bottom: 50px;
	}

	.plan-right .item textarea {
		 90%;
		margin-top: 3px;
	}

	>>>.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #272828;
	}
</style>