Vue 在开发中使用Element框架中的tree组件，配置菜单权限在左侧导航菜单显示，点击子节点菜单时无法获取父节点的id，只有其子节点的和上级菜单的id数组

Posted 2022-11-24 龖龖龖

Vue 在开发中配置菜单权限在左侧导航菜单显示，点击子节点菜单时无法获取父节点的id，只有其子节点的和上级菜单的id数组

<template>
  <div>
      <!-- 
      1、当点击树的子节点时(点击选择框时，获取其父节点和子节点的id 
      2、@check 为勾中选择框触发的方法 （根据需求参考Element框架上tree的事件
      -->
      <el-tree
        :data="Treedata"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        @check="currentChecked"
      >
      </el-tree>
    </el-card>
  </div>
</template>

<script>
export default 
  components: ,
  name: "",
  data() 
    return 
      defaultProps: 
        children: 'children',
        label: 'label'
      ,
      Treedata: [
        
          id: 1,
          label: "一级 1",
          children: [
            
              id: 4,
              label: "二级 1-1",
              children: [
                
                  id: 9,
                  label: "三级 1-1-1",
                ,
                
                  id: 10,
                  label: "三级 1-1-2",
                ,
              ],
            ,
          ],
        ,
        
          id: 2,
          label: "一级 2",
          children: [
            
              id: 5,
              label: "二级 2-1",
            ,
            
              id: 6,
              label: "二级 2-2",
            ,
          ],
        ,
        
          id: 3,
          label: "一级 3",
          children: [
            
              id: 7,
              label: "二级 3-1",
            ,
            
              id: 8,
              label: "二级 3-2",
            ,
          ],
        ,
      ],
    ;
  ,
  mounted() ,
  methods: 
    currentChecked(checkNode,treeCheckData) 
      console.log(checkNode,treeCheckData);
      //共两个参数，依次为：
      //1、传递给 Treedata 属性的数组中该节点所对应的对象、即当前选中的节点
      //2、树目前的选中状态对象，包含:
     //checkedNodes: 当前子节点的数据
      //checkedKeys:  当前子节点的id
      //halfCheckedNodes: 当前选中的父、子节点的数据
      //halfCheckedKeys:  当前选中子节点的父节点id
      let fid = treeCheckData.halfCheckedKeys
      let zid = treeCheckData.checkedKeys
      //应用场景：在开发中配置菜单权限在左侧导航菜单显示，点击子节点菜单时发现父节点的id没有传，只有其子节点的和上级菜单的id数组
      let arr = fid.concat(zid)//利用concat方法合并数组
      console.log(arr);//最终得到最顶级的父节点的id和二级菜单和子节点的id合并好的数组，最后传给后台
    ,
   
  ,
;
</script>