Antd (v3)在form中使用 treeSelect 选择后显示所有的父节点

需求:

const d = [
  {
    "children": [
      {
        "name": "1-1"
      },
      {
        "name": "1-2"
      },
      {
        "name": "1-3"
      }
    ],
    "name": "1"
  },
  {
    "children": [
      {
        "name": "2-1"
      },
      {
        "name": "2-2"
      },
      {
        "name": "2-3"
      },
      {
        "name": "2-4"
      },
      {
        "name": "2-5"
      }
    ],
    "name": "2"
  }
]

以上数据生成一个treeSelect放到form表单中,且treeSelect选中后自动带上该节点的所有父节点

解决:

格式化数据满足antd 的要求

const translateToTree = (d) => {
  const loop = (d, parentName) => {
    d.forEach(ele => {
      ele.title = ele.name
      let _name = `${ele.name}/${parentName}`
      ele.key = ele.value = parentName ? parentName + ele.name : ele.name
      if (ele.children && ele.children.length > 0) {
        loop(ele.children, _name)
      }
    })
  }
  loop(d, '')
  return d
}

更改treeSelect 选中后对应的字段,默认是 **title**

const treeSelectionByList = (treeData) => {
    return (
        <TreeSelect

            <span notion-color="red"><u>**treeNodeLabelProp='value'**</u></span><span notion-color="red">**
**</span>
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            showSearch
            placeholder='请选择'
            treeDefaultExpandAll
            allowClear
        />
    )
}

此处通过treeNodeLabelProp更改默认字段为格式化后的value