当时需求是根据楼房单元,层数,每层户数批量生成门牌号
1.循环生成单元块后,发现checkbox无法赋值;input无法输入,深拷贝关键unit[unit.houseNumberInput]
<div
v-for="(unit,index) in unitList"
:key="index"
style="
border-radius: 8px;
border: 1px solid #eeeeee;
height: 300px;
margin-top: 15px;
box-shadow: rgb(219,219,219) 0px 0px 8px 0px;
">
<div
style="height: 50px;
line-height: 50px;
color: #333333;
background-color: #3C9FFF;
border-radius: 8px 8px 0px 0px;
width: 100%;">
<span style="margin-left: 20px;font-size: 16px;color: #FFFFFF;font-weight: bold;">{{index+1}}单元信息</span>
</div>
<div style="display: flex;margin: 10px 20px;">
<el-button type="primary" v-if="index>0" icon="el-icon-copy-document" @click="copyBeforeUnit(unit,index)">复制上单元</el-button>
<el-button type="primary" plain icon="el-icon-house" @click="batchCreate(unit,index)">批量生成</el-button>
<el-button plain icon="el-icon-delete" @click="clearHouseNumber(unit,index)">清空</el-button>
</div>
<div
style="background-color: #FFFFFF;
height:150px;
border-radius: 9px;
font-size: 14px;
margin: 0 auto;
box-shadow: rgb(219,219,219) 0px 0px 8px 0px;
padding: 15px;
overflow-y: auto;
width: 92.5%;">
<el-checkbox-group v-model="unit.checkHouseNumebrList" @change="handleCheckedHouseNumebrChange(unit,index)">
<el-checkbox v-for="item in unit.houseNumbers" :label="item" :key="item" border style="margin-left: 0;margin-top: 10px;"></el-checkbox>
</el-checkbox-group>
<el-input type="number" v-model="unit[unit.houseNumberInput]" placeholder="输入门牌号点击回车即可生成房屋" style="width: 300px;margin-top: 10px;" @keydown.enter.native="saveHouseNumber(unit,index)"></el-input>
</div>
</div>
2.解决问题的关键是this.$set(this.unitList, index, unit);v-for时this.unitList即便是赋值了也不会刷新,this.$set()方法可以让循环的列表刷新指定下标的信息;继续通过unit[unit.houseNumberInput]获取input中动态绑定的值
//复制上单元
copyBeforeUnit(unit,index){
let houseNumbers = this.unitList[index-1].houseNumbers
let checkHouseNumebrList = this.unitList[index-1].checkHouseNumebrList
unit.houseNumbers = houseNumbers.slice()
unit.checkHouseNumebrList = checkHouseNumebrList.slice()
this.$set(this.unitList, index, unit)
},
//批量生成门牌号
batchCreate(unit,index){
if (unit.houseNumbers.length === 0){
//单元数 楼层数 每层户数 | 层数+0+户号
getDetailUnit(this.buildingAndUnitInfo.id,index+1).then(res => {
let unitInfo = res.data.data;
for (let i = 1;i<=unitInfo.unitFloorNumber;i++){
for (let j = 1;j<=unitInfo.unitHousehold;j++){
unit.houseNumbers.push(i+"0"+j)
//默认选中
unit.checkHouseNumebrList.push(i+"0"+j)
}
}
this.$set(this.unitList, index, unit)
});
}
},
//清空门牌号
clearHouseNumber(unit,index){
unit.houseNumbers = []
unit.checkHouseNumebrList = []
this.$set(this.unitList, index, unit)
},
//回车生成门牌号
saveHouseNumber(unit,index){
if (unit[unit.houseNumberInput] !== undefined && Math.floor(unit[unit.houseNumberInput]) == unit[unit.houseNumberInput]){
if (!unit.houseNumbers.includes(unit[unit.houseNumberInput]) && unit[unit.houseNumberInput] !== ''){
unit.houseNumbers.push(unit[unit.houseNumberInput])
unit.checkHouseNumebrList.push(unit[unit.houseNumberInput])
unit[unit.houseNumberInput] = ''
this.$set(this.unitList, index, unit)
}else {
this.$message({
message: '不可重复添加房屋',
type: 'warning'
})
}
}else {
this.$message({
message: '请输入整数',
type: 'warning'
})
}
},
//存储房屋
saveHouse(){
this.btnDisabled = true
let count = 0;
for (let i in this.unitList){
if (this.unitList[i].houseNumbers.length===0){
count++;
return this.$message({
message: this.unitList[i].unitName+'单元未生成房屋',
type: 'warning'
})
}
}
setTimeout(()=>{
if (count === 0){
this.buildingAndUnitInfo.buildingUnit = this.unitList.slice()
console.log(this.buildingAndUnitInfo)
saveHouse(this.buildingAndUnitInfo).then(() => {
this.$message({
type: "success",
message: "保存成功!"
});
this.btnDisabled = false
this.batchCreateHouseNumebrVisible = false;
this.onLoad(this.page);
});
}else {
this.btnDisabled = false
}
},500)
}
3.批量生成的问题解决了,又发现取消选中怎么点都没有用,通过控制台输出发现每次点击都是原来的数组,这时候叕叕叕叕用到这个宝藏方法了this.$set(要刷新的数组,下标,值),一下解决了哈哈哈哈哈
handleCheckedHouseNumebrChange(unit,index) {
this.$set(this.unitList, index, unit)
},