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