element中的tree組件實現菜單分配

1. 返回的菜單數據
   
   
2. tree組件的使用

    <el-tree
        ref="menuList"    // 
        :data="menuList"    // 展示數據
        :props="defaultProps"    // 配置選項
        show-checkbox    // 節點是否可被選中
        node-key="menuId"    // 唯一標識
        :check-strictly="checkStrictly"    // 設置父子關聯
        :default-expand-all="expandAll"    // 是否默認展開所有節點
        :default-checked-keys="checkedKeys"    // 默認勾選節點的數組
        @node-click="handleNodeClick"    // 節點被點擊時回調
        @check-change="handleCheckChange"    // 當前選中節點變化時觸發的事件
        >
      </el-tree>

export default {
  data() {
    return {
      expandAll: true,
      checkedKeys: [],
      menuList: [],
      defaultProps: {
        children: 'menuList',
        label: 'menuName'
      },
      selectMenuId: [],
      selArr: [],
      roleAllLists: [],
      roleId: '',
      checkStrictly: true
    }
  },
methods: {
    // 獲取所有角色列表
    getRoleAllLists () {
      this.loading = true;
      this.axios.post("/adminUserService/queryRoleList", {}).then(res => {
        if (res && res.data.data.code === 200) {
            // 設置tree數據
          this.menuList = res.data.data.data.menuList;
            // 獲取選中的節點數組
          this.selectKeys(this.menuList);
            // 給選中的節點前添加對號
          this.checkedKeys = this.selArr;
        }
      })
    },
// 查找已經被選中的節點
    selectKeys (menuList) {
      for (let menu of menuList) {
        if (menu.hasMenue) {
          this.selArr.push(menu.menuId);
        }
        if (menu.menuList) {
          this.selectKeys(menu.menuList)
        }
      }
    },
// 保存菜單
    saveRoleMenu () {
      console.log(this.roleId)
      this.axios.post("/adminUserService/saveRoleMenu", {roleId: this.roleId, menuIdList: this.selectMenuId}, {}).then(res => {
        if (res && res.data.data.code === 200) {
          this.$message({
            message: "角色菜單修改成功",
            type: 'success'
          })
          this.dialogVisible = false;
        }
      })
    },
// 節點選中狀態改變
    handleCheckChange(data, checked, indeterminate) {
      this.checkStrictly = false;
        // 節點被選中時，獲取所有選中的節點id
      this.selectMenuId = this.$refs.menuList.getCheckedKeys().concat(this.$refs.menuList.getHalfCheckedKeys());
    }
}
｝