在作這種點擊左側「角色」,右側對應選中(Switch)已有的權限功能操做時,可能會遇到給某個選中的「角色」賦權限或刪除權限時,數據庫數據操做成功,可是界面上Switch控件沒有表現出對應的狀態,頗有可能時由於你的「權限列表數據」或「根據角色查詢當前角色權限數據」返回時沒有「statu」這個字段(以下圖),你的「statu」字段是你在前端界面對象中附加進去的,這樣會致使你的Switch控件點擊看起來不會發生變化。前端
另外附上點擊左側Table中「某一行角色」,右側權限列表對應選中角色已有權限主要代碼:
備註:this.actionList爲右側權限列表數據源;res爲GetRoleAssignPermission這個api返回的當前角色已有權限的集合;
經過map遍歷和filter過濾集合實現ios
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) { console.log(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; } }); },