注:【网页版】右上方的悬浮框( 有目录索引 )
一、选中 数组中有其值的 checkbox
1-1】js 代码
var vue = new Vue({
el:"#app",
data:{
roleqxs:[],
qxs:[],
updateQxInfo:[]
},
methods:{
initLoadData(){
// 后台查询出数据
// 返回值中包括 1)角色及其权限信息 2)所有权限
$.get("http://localhost:8080/getAllInfo",function(res){
console.log(res);
vue.qxs=res.data.QxInfo; // 存储权限信息
vue.roleqxs=res.data.RoleQxInfo; // 存储角色及其权限信息
// 循环遍历 角色及其权限 集合
vue.roleqxs.forEach(function(obj){
obj.qx.forEach(function(res){
vue.updateQxInfo.push(obj.id+"-"+res.id)
})
})
console.log(vue.updateQxInfo)
})
},
toUpdate(){
$.post("http://localhost:8080/updateRoleQx","list="+vue.updateQxInfo,function(res){
alert(res);
})
}
},
mounted:function(){
this.initLoadData()
}
})
1-2】前端代码
<tbody>
<tr v-for="item,index1 in roleqxs">
<td>{{item.role}}</td>
<td>
<span v-for="ii in qxs" class="debj_span_fk">
<input type="checkbox" v-model="updateQxInfo" :value="item.id+'-'+ii.id"/>
{{ii.permission}}
</span>
</td>
</tr>
</tbody>