问题描述：
做项目时有个需求是初始化查询出上次保存的选项,并且可以修改，截图如下:
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
总结:
要使用这个标签一定要好好看官方文档,然后按照文档格式,修改部分自己的代码来实现效果,如果有更好的方法,请指正交流~
