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选中后自动带上该节点的所有父节点

解决:

1. 格式化数据满足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
   }
   

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

   const treeSelectionByList = (treeData) => {
       return (
           <TreeSelect
   
               **treeNodeLabelProp='value'**
   
               dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
               treeData={treeData}
               showSearch
               placeholder='请选择'
               treeDefaultExpandAll
               allowClear
           />
       )
   }
   

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