根据官方文档TreeNodetitle可以是字符串也可以是ReactNode
根据需求,需要在后面添加两个复选框来表示编辑和只读权限。以为只是很简单的将 title 改为ReactNode即可。但是复选框选择时,遇到问题,就是不好使。
究其原因:事件冒泡,点击复选框是同时出发了 title 的点击选中事件(selectable 属性),如果将属性设置为false,则点击就会选中前面的复选框。

ant design Tree 自定义title

因此只需要在复选框的外层添加 click 事件,并阻止冒泡即可。

  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' },
  ];

  // 自定义title
  const rendertitle = () => (
    <div style={{ display: 'flex' }} onClick={e => e.stopPropagation()}>
      自定义title
      <div style={{ marginLeft: 20 }}>
        <Checkbox.Group options={options} onChange={e => onChange(e)} />
      </div>
    </div>
  )

相关文章:

  • 2022-12-23
  • 2021-08-20
  • 2021-09-28
  • 2022-12-23
  • 2022-12-23
  • 2021-09-15
  • 2022-12-23
猜你喜欢
  • 2021-11-23
  • 2021-12-21
  • 2021-10-01
  • 2021-07-10
  • 2021-05-22
  • 2022-12-23
  • 2021-12-06
相关资源
相似解决方案