ant design 中 Tree、TreeSelect的使用

参考链接

后端给的字段不满足Tree组件的字段时候，写个函数，映射一下，目前是映射了title，key，同理可以映射children、disabled等字段

			<Form.Item
                name="id"
                label="标签名称"
                rules={[
                  { required: true, message: '请选择标签名称' }
                ]}
              >
                <TreeSelect
                  showSearch
                  treeNodeFilterProp="title"//搜索汉字
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  placeholder="请选择标签名称"
                  allowClear
                  // multiple   //是否允许多选
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  treeData={dealTreeDataLeaf(SideLabelTree, "eventType", "id")}  //SideLabelTree s是拿到的数据，eventType id是SideLabelTree里面的字段
                >
                </TreeSelect>
              </Form.Item>

                

// treeData 调用下面的函数

// children处理数据 父级不可勾选
 const dealTreeDataLeaf=function(data:any,nameKey:string,idKey:string){
  if(Array.isArray(data)&&data.length){
    data.map((item,idx)=>{
      item.title=item[nameKey];
      item.label=item[nameKey];
      item.value=item[idKey];
      item.key=item[idKey];
      if(item.children && item.children.length>0){
        // item.selectable=false;//父节点是否可选
        dealTreeDataLeaf(item.children,nameKey,idKey)
      }else{
        // item.selectable=true;
      }
    })
  }
  return data
  }



//监听里面有三个参数，第三个可以拿到选中的数据  单选的时候使用
  const onChangeSelect = (newValue, b, con) => {
    console.log('下拉选择树：', newValue,con);
    console.log(con.allCheckedNodes.lastItem.node.props)
  }