react antd TreeSelect实现自定义标签

本文主要是介绍react antd TreeSelect实现自定义标签，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 <ProFormTreeSelectlabel="接收对象"name="receiverObjects"colProps={{ span: 16 }}labelCol={{span: 6,}}wrapperCol={{span: 18,}}rules={[{ required: true }]}fieldProps={{showSearch: true,multiple: true,// autoClearSearchValue: true,filterTreeNode: true,treeCheckable: true,treeDataSimpleMode: true,treeNodeFilterProp: 'label',tagRender: (props) => {if (!props.value) return <></>;const ReceiverType = props.value.split('_')[0];let selectTreeData = groupTree;switch (ReceiverType) {case 'group': {selectTreeData = groupTree;break;}case 'user': {selectTreeData = userTree;break;}case 'location': {selectTreeData = locationTree;break;}default:break;}const selectObj = getTreeLabel(selectTreeData, props.value);return (<div className="ant-select-selection-overflow"><div className="ant-select-selection-overflow-item"><span className="ant-select-selection-item" title={selectObj?.label}><span className="ant-select-selection-item-content">{selectObj?.label}</span><spanclassName="ant-select-selection-item-remove"onClick={() => {props.onClose();}}><span className="anticon anticon-close"><CloseOutlined /></span></span></span></div></div>);},dropdownRender: (originNode: ReactNode) => {return (<div><Tabstype="line"className="w-full pl-4"activeKey={activeKey}tabBarStyle={{ height: '32px', marginBottom: '4px' }}onChange={(activeKey) => {setActiveKey(activeKey);}}items={ReceiverType}/>{originNode}</div>);},treeData: treeData,}}/>

selectObj的值是：（单个选项）

tagRender：显示的是单个tag的数据

自定义 tag 内容，多选时生效

(props) => ReactNode

  const getTreeLabel = (data: TreeProps, value: string) => {let result: TreeItemProps = {};let fn = function (data: TreeProps) {if (Array.isArray(data)) {for (let i = 0; i < data.length; i++) {const e = data[i];if (e.key === value) {result = e; // 返回的结果等于每一项break;} else if (e.children) {fn(e.children); // 递归调用下边的子项}}}};fn(data); // 调用一下return result;};

这篇关于react antd TreeSelect实现自定义标签的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---