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());
    }
}
｝