Element-UI中,Switch 開關控件點擊事件觸發,但Switch狀態不切換(角色權限管理功能)

clipboard.png
在做這種點擊左側“角色”,右側對應選中(Switch)已有的權限功能操作時,可能會遇到給某個選中的“角色”賦權限或刪除權限時,數據庫數據操作成功,但是界面上Switch控件沒有表現出對應的狀態,很有可能時因爲你的“權限列表數據”或“根據角色查詢當前角色權限數據”返回時沒有“statu”這個字段(如下圖),你的“statu”字段是你在前端界面對象中附加進去的,這樣會導致你的Switch控件點擊看起來不會發生變化。

clipboard.png
另外附上點擊左側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;
      }
    });
},
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章