vue迴圈渲染複選框列表
阿新 • • 發佈:2021-12-23
<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 { width: 100%; min-height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border: 1px solid #eee; border-radius: 3px; } .plan label { width: 60px; min-height: 80px; display: flex; align-items: center; justify-content: center; } .plan .plan-right { width: calc(100% - 60px); min-height: 80px; display: flex; flex-wrap: wrap; } .plan-right .item { /* display: flex; align-items: center; */ width: 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-width: 40px; /* height: 36px; */ /* line-height: 36px; */ margin: 0; color: #666; } .plan-right .item select { width: 80px; height: 30px; background: #f9f9f9; border-radius: 3px; outline: none; margin-top: 3px; } .plan:last-child { margin-bottom: 50px; } .plan-right .item textarea { width: 90%; margin-top: 3px; } >>>.el-checkbox__input.is-checked+.el-checkbox__label { color: #272828; } </style>