在做這種點擊左側“角色”,右側對應選中(Switch)已有的權限功能操作時,可能會遇到給某個選中的“角色”賦權限或刪除權限時,數據庫數據操作成功,但是界面上Switch控件沒有表現出對應的狀態,很有可能時因爲你的“權限列表數據”或“根據角色查詢當前角色權限數據”返回時沒有“statu”這個字段(如下圖),你的“statu”字段是你在前端界面對象中附加進去的,這樣會導致你的Switch控件點擊看起來不會發生變化。
另外附上點擊左側Table中“某一行角色”,右側權限列表對應選中角色已有權限主要代碼:
備註:this.actionList爲右側權限列表數據源;res爲GetRoleAssignPermission這個api返回的當前角色已有權限的集合;
通過map遍歷和filter過濾集合實現
handleCurrentChange(row) {
this.currRow = row;
this.$axios
.get(
`/api/User/GetRoleAssignPermission?roleId=${row.ID}&projectId=${localStorage.eleProjectId}`
)
.then(res => {
let newaction = this.actionList.map(action => {
let newr = res.filter(r => {
if (r.PermissionID == action.ID) {
return r;
}
});
console.log(action);
if (newr.length > 0) {
action.Statu = true;
} else {
action.Statu = false;
}
return action;
});
this.actionList = newaction;
});
},
//點擊Switch按鈕觸發事件(綁定角色權限或取消角色權限功能)
setpermission(row) {
this.$axios
.post(`/api/User/RoleAssignPermission`, {
PermissionID: row.ID,
RoleID: this.currRow.ID,
ProjectID: localStorage.eleProjectId
})
.then(res => {
console.log("綁定成功");
})
.catch(err => {
if (row.Statu) {
row.Statu = false;
} else {
row.Statu = true;
}
});
},