ant-design-vue tree组件选中节点也可以勾选上checkbox

项目中遇到一个需求，就是使用ant-design-vue tree组件的时候，希望在选中节点的时候，同时也把checkbox也选中/取消，刚开始的时候想法是循环checkedKeys，如果有选中的key就删除，没有就往里面push，代码如下：

节点选中事件

// tree
<a-tree
    checkable
    v-model="checkedKeys"
    :tree-data="treeData"
    @select="treeNodeSelect"
>
</a-tree>
treeNodeSelect(selectedKeys, e) {
  let key = e.node.dataRef.key;
  let index = this.checkedKeys.findIndex(item=>item==key);
  // 没有这个key，
  if(index == -1){
    this.checkedKeys.push(key)
  }else{
    this.checkedKeys.splice(index, 1)
  }
}

貌似一切都走向正轨，然而，当整个tree是全选的状态，选中文本节点的时候发现checkbox并没有被取消，除非先勾选一下checkbox（ps：不知道是不是只有我自己遇到这种问题，如果是，忽略下面内容），所以不得不改变思路：既然选中文本节点也要选中/取消勾选checkbox，那就选中文本节点的时候，手动触发checkbox的click事件就好了，所以查阅了资料，更改如下：

treeNodeSelect(selectedKeys, e) {
    // 转成真正的数组
    const toArray = (list) => Array.from(list || []);
    // 获取被点击的树节点
    // e.nativeEvent.path应该就相当于chrome浏览器中的event.path：表示触发Dom事件的元素一路冒泡到window的所有元素
    // event.path只适用chrome浏览器，可通过event.path || (event.composedpath && event.composedpat())方式做兼容处理
    // e.nativeEvent.path可能也要做兼容处理，自行尝试，e?.nativeEvent?.path这种写法只能不报错，但无法兼容其他浏览器实现此功能
    // 这里只要取包裹checkbox和文本的父li就可以了，className并不是一定叫“ant-tree-treenode”，可f12查看自行更改
    const node = e.nativeEvent.path.find((item) => {
        return toArray(item.classList).findIndex(className => className == "ant-tree-treenode") != -1;
    });
    // 获取checkbox
    const checkbox = toArray(node.childNodes).find((item: any) => {
        return toArray(item.classList).findIndex(className => className == "ant-tree-checkbox") != -1;
    })
    // 模拟点击
    checkbox && checkbox.click();
}