vue el-checkbox多选框标签的使用1-展现多选框列表

问题形容

问题一: 实现查询一律选项(进行增加设置时,需要从新增,所以需要查询所有选项，参数是传递选中的值)，实现效果如下图所示

image

实现方法:

1) 在 el-checkbox-group 标签中 写一个 el-checkbox标签 外层写一个li标签（这里其余标签也可以）写法如下图所示

image

<el-checkbox-group  v-model="addRoles">            <li v-for="(item,index) in quanxian" :key="index">              <el-checkbox  :label="item.resourcesID" :key="item.resourcesID" >{{item.name}}</el-checkbox><br>            </li></el-checkbox-group>

2) 下图这么写是解决所有选中框数组里的值,这里存储的是选中框的id值，后端参数需要传递 id 并用逗号分隔,所以这么解决:

//循环数组      for ( var i = 0; i <this.addRoles.length; i++){              console.log(this.addRoles[i]);              if(i===0){                this.addRoleParam.resourcesIDs=this.addRoles[i]              }else {                this.addRoleParam.resourcesIDs+=','+this.addRoles[i]              }       }

3) 下图所示,点击确定调用接口,红框中的id参数，是后端接口要求的格式,假如有其余的解决方法，欢迎交流~

image