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