antd design Tree组件如何点击title就是点击展开/缩起

70 阅读1分钟

antd design Tree组件默认点击头部是不会像点击左边小三角一样进行展开/缩起的,但是有时候产品为了体验会要求点击title就可以像点击小三角一样进行展开/缩起

这里我使用了查找dom的方式模拟点击小三角(没找到可能存在的api),如果有更方便办法各位可以评论区讨论

static treeSelectMockExpand(e: Parameters<TreeProps['onSelect']>[1]) {
  const paths = e.nativeEvent.composedPath();
  for (let i = 0; i < paths.length; i++) {
    if (typeof (paths[i].className) !== 'undefined' && paths[i].className.indexOf('ant-tree-treenode') >= 0) {
      for (let j = 0; j < paths[i].childNodes.length; j++) {
        if (typeof (paths[i].childNodes[j].className) !== 'undefined' && paths[i].childNodes[j].className.indexOf('ant-tree-switcher') >= 0) {
          paths[i].childNodes[j].click();
          break;
        }
      }
      break;
    }
  }
}