史上最详细的vue动态生成checkbox的选项并实现多选框的保存回显处理
按以下步骤实现多选框功能：
1.在<el-form>标配中页面增加
<el-form>
<el-form-item label="设备" prop="equipment">
<template>
<el-checkbox-group v-model="zz" format="changeStyle">
<el-checkbox
v-for="item in hardwareListData"
:key="item.id"
:label="item.id"
@change=" handleChange($event,item.id)">{{item.name}}</el-checkbox>
</el-checkbox-group>
</template>
</el-form-item>
</el-form>
2.多选框用到的相关值准备
export default {
name: "Room",
data() {
return {
hardwareListData:[],//后台返回的多选项
checkedData: [],//选择多选框时的选中值
zz:[0],//v_model取此值，没有默认0值使回显报错
}
}
}
3.相关方法
created() {
getHardwareListData();
}，
methods: {
//获取会议室硬件
getHardwareListData(){
//具体方法不写了，就是从后台获取多选的选项，给this.hardwareListData赋值
this.hardwareListData = response.data;
},
//实时获取选中的选项id，注意此方法中e参数的传入
handleChange:function(e,id) {
if(e){
this.checkedData.push(id);
}else{
this.delete(id);
}
console.log(this.checkedData);
},
//删除选中项
delete(id){
var index = this.checkedData.findIndex(item => {
if ( item == id) {
return true;
}
});
this.checkedData.splice(index,1)
},
4.新增记录的方法中设置this.zz = [0];
例如：
add() {//此方法仅关键代码（将以下代码放入自己的新增方法中）
this.zz = [0];//注意此处初始zz参数
this.open = true;
this.title = "添加会议室";
},
5.修改记录时回显多选项
update(){//此方法仅关键代码（将以下代码放入自己的修改方法中）
this.form = response.data;//注意response，所以此处方法应放到返回值处理的回调方法中
this.zz = this.transStrToArr(this.form.equipment);//equipment存入的是设备id字符串已逗号分隔"1,2,4"
for(var i=0;i<this.zz.length;i++){
this.zz[i] = parseInt(this.zz[i]);
}
this.checkedData = this.zz;
console.log(this.zz);
//this.open = true;
//this.title = "修改会议室";
}
// 字符串转数组 前台展示
transStrToArr(str) {
var arr = str.split(",");
return arr;
},
6.提交后台数据
submitForm: function() {
this.form.equipment = this.transArrToString(this.checkedData);//在提交前将多选项的值赋值给form表单对应字段
add(this.form).then(//此处返回值回调处理省略)
}，
// 数组状字符串 给后台
transArrToString(arr) {
if (!Array.isArray(arr)) return false;
var str = "";
for (var i = 0, len = arr.length; i < len; i++) {
i == 0 ? (str = arr[i]) : (str += "," + arr[i]);
}
return str;
},
}
哈哈哈，到此大功告成。。。
修改回显效果图（数据存的是设备id字符串，在sql中转的文字，先实现显示id串（如：“2,3,4”）没有错，后期博文说如何转文字）
以上是 史上最详细的vue动态生成checkbox的选项并实现多选框的保存回显处理 的全部内容， 来源链接： utcz.com/z/377706.html
