ant design中的TreeSelect 组件如何只获取子节点的集合?

Question

### 题目描述

ant design中的TreeSelect 组件

选中节点的数据为:

期望得到的数据为:

['0-0-0','0-1-0','0-1-1']

希望显示方式为:SHOW_PARENT

数据获取格式为:SHOW_CHILD

想要 获取当前选择的所有子节点key,而不包括父节点的key

### 题目来源及自己的思路

当前案例可以使用数据筛选, 但是实际项目中数据没有0-0-1这样的规律,

### 相关代码
粘贴代码文本（请勿用截图）

codesandbox

import { TreeSelect } from 'antd';

const { SHOW_PARENT } = TreeSelect;

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];

class Demo extends React.Component {
  state = {
    value: ['0-0-0'],
  };

  onChange = value => {
    console.log('onChange ', value);
    this.setState({ value });
  };

  render() {
    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      placeholder: 'Please select',
      style: {
        width: '100%',
      },
    };
    return <TreeSelect {...tProps} />;
  }
}

ReactDOM.render(<Demo />, mountNode);

and design TreeSelect 地址

Answer 1

加上treeCheckable属性就行

https://codesandbox.io/s/kego...

---

不要showCheckedStrategy: SHOW_PARENT,使用他的默认值！！！你仔细看看这个API。

---

根据treeDataSimpleMode属性把你的树形结构定义成简单的结构，然后使用showCheckedStrategy: SHOW_PARENT，全选时只显示父节点。
最后根据选择出来的数据，根据isLeaf判断节点A是否叶子节点，不是的话，就遍历treeData中pId=A.id的所有节点。