vue el-checkbox多选框标签的使用2-展现部分选中的多选框

问题形容：

做项目时有个需求是初始化查询出上次保存的选项,并且可以修改，截图如下:

image

其中被选中的选项是上次查询出来的,如何实现呢?最终经过查询官方文档：

image

通过上图可以大概理解vue帮我们做了很多操作，我们只要要修改部分代码，

就可实现,这里的重点是怎样显示数组的文字，并且v-model绑定的是选中框的id

而后想到一个方法,这样实现,代码截图如下:

image

上图代码:

<el-checkbox-group  v-model="selectRolesQx">            <li v-for="item in allRolesQx" >              <el-checkbox  :label="item" :key="item" >{{item | itemforname(item)}}</el-checkbox><br>            </li> </el-checkbox-group>

首先来看下,选中的数组是怎样解决的:

image

上图代码:

    api.getXDRoleResourcesListbyroleID({ 'roleID': this.editRoleId }).then(res => {          if (res.data.code === '1') {              this.checkedRoles = res.data.data              this.selectRolesQx=[]              for (let i =0;i<res.data.data.length;i++){                this.selectRolesQx.push(res.data.data[i].resourcesID+':'+res.data.data[i].name)              }           }      })

上面就解决好了每次查询上次存储选中框的数组,而后来看下所有值的数组怎样解决的:

image

上图代码

    api.getXDResourcesList({ 'city': '' }).then(res => {            if (res.data.code === '1') {              this.quanxian = res.data.data              this.allRolesQx=[]              for (let i =0;i<res.data.data.length;i++){                this.allRolesQx.push(res.data.data[i].resourcesID+':'+res.data.data[i].name)              }            }          })

再来看下,显示的值的方法怎样解决的:

image

上图代码:

filters: {      itemforname :function(item){        let items = item.split(':');         return items[1]      },    }

这个方法比较简单,逻辑就是根据每一项传递过来的item，返回value值,注意这里的方法要放在filters里才可以

最后看下怎样解决id 的拼接:

image

上图代码:

for(var i=0;i<this.selectRolesQx.length;i++){      if(i===0){          this.editRoleParam.resourcesIDs=this.selectRolesQx[i].split(':')[0]      }else {          this.editRoleParam.resourcesIDs+=','+this.selectRolesQx[i].split(':')[0]      } }

点击提交,将后端需要的参数传递过去:

image

总结:

要使用这个标签肯定要好好看官方文档,而后按照文档格式,修改部分自己的代码来实现效果,假如有更好的方法,请指正交流~