elementUI多選框問題( 編輯中選中問題 )


elementUI多選框問題( 編輯中選中問題 )

<!--這里是權限的展示    兩次for循環-->
<div v-for="(itemParent, indexParent) in parentChildMap" :key="indexParent">
   <el-form-item class="xxx" :label="itemParent.name + ':'">
       <span v-for="(itemChild, indexChild) in itemParent.children" :key="indexChild" @change="handel(itemChild.id,itemChild.name,itemParent.id,itemChild.parentId)">
           <el-checkbox :label="itemChild.name" :checked="itemChild.checkedFlag"></el-checkbox>
       </span>
   </el-form-item>
</div>        
// 獲取角色權限列表 復選框的數據   GET請求    復選框選中問題解決(所有數據在當前角色權限數據中調用)
    getListRoleList() {
      // 獲取 當前 編輯角色的權限數據
      const req = {
        roleId: parseInt(this.$route.query.id)
      };
      roleList(req).then(({ data }) => {
        // 定義接收當前角色的數據
        let currentRolePermissionData = data.data;
        roleManagementPermissionlist().then(({ data }) => {
          this.roleBaseedVal = data.data;
          //使用過濾器先將父集合 和子集合分離出來
          this.roleBaseedVal.filter(item => {
            if (item.menuType == 1) {
              this.parentVal.push(item);
            } else if (item.menuType == 2) {
              this.childBtnVal.push(item);
            }
          });
          //根據parentId和id的相等關系,找出子對應父
          this.parentVal.filter(item => {
            //定義一個空數組,判斷關系后重新賦值
            item.children = [];
            this.childBtnVal.filter(items => {
              // 遍歷當前角色數據 並定義選中與不選中( 在所有的按鈕中加一個控制顯示隱藏的屬性 )
              items.checkedFlag = false;
              for (let i = 0; i < currentRolePermissionData.length; i++) {
                // 判斷所有的按鈕數據中是否與當前角色id值為一樣,如果有值為true選中
                if (items.id == currentRolePermissionData[i].id) {
                  // 值為true時阻止本次循環
                  items.checkedFlag = true;
                  break;
                }
              }
              if (item.id == items.parentId) {
                item.children.push(items);
              }
            });
          });
          //賦值給一個空數組,可以for循環了
          this.parentChildMap = this.parentVal;
        });
      });
    }
//此方法直接執行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM