前言：最近在开发菜单权限分配的时候，用到了Element-Plus里面的Tree树形控件来显示菜单，但是在提交确认的时候需要知道当前已选的菜单节点，所以引出了题中的问题

实现方法

其实也很简单，Element里面有个check方法，这个方法有两个参数可以传入，而第二个参数就是我们要的，第二参数即树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 传入的菜单
const menuArray : any = ref([])

// 传入半选中的菜单
const menuHalfArray : any = ref([])

// 点击菜单管理多选框
const handleNodeClick = (nodeObj : any , SelectedObj : any) => {
  if(SelectedObj.checkedNodes){
    menuArray.value = SelectedObj.checkedNodes
  }
  // 半选中菜单赋值
  if(SelectedObj.halfCheckedNodes){
    menuHalfArray.value = SelectedObj.halfCheckedNodes
  }
}

checkedNodes既是当前选中的节点，而半选中的节点也可以通过halfCheckedNodes来获取。就是这么简单

另外，可以给el-tree控件加入node-key 属性，以保证每个树节点都有作为唯一标识的属性。使用上面的checkedKeys和halfCheckedKeys 方法是需要设置这个属性的

1
2
3
4
5
TreeChecked (nodeObj, SelectedObj) {
      console.log(SelectedObj)
      console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
      console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组  
    }