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

总结:

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