史上最详细的vue动态生成checkbox的选项并实现多选框的保存回显

史上最详细的vue动态生成checkbox的选项并实现多选框的保存回显处理

按以下步骤实现多选框功能：

1.在标配中页面增加

v-for="item in hardwareListData"

:key="item.id"

:label="item.id"

@change=" handleChange($event,item.id)">{{item.name}}

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[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的选项并实现多选框的保存回显相关教程