r-org-tree

介绍

react的组织树组件

使用方式

import React, { useState } from 'react'
import { OrgTree } from 'r-org-tree'
import { DataProps } from 'r-org-tree/es/components/OrgTree'

const horizontal = false; // true：横向  false：纵向
const collapsable = false; // true：可折叠 false：不可折叠 
const expandAll = true; // true: 全部展开 false：全部折叠 

interface DemoProps {
	// 自己添加
}

const Demo: React.FC<DemoProps> = ({

}) => {
	const [value, setValue] = useState()

	const data: DataProps = {
		id: 0,
		label: '一级',
		children: [
			{
				id: 1,
				label: <div>二级内容1</div>,
				conditionList: '条件项',
				children: [
					{
						id: 4,
						label: '三级内容1',
						conditionList: '年后111',
					},
					{
						id: 5,
						label: '三级内容2'
					}
				]
			},
			{
				id: 2,
				label: <div>二级内容1</div>,
				children: [{ id: 44, label: 'demo' }]
			}
		]
	}

	const handleClick = (_e, data) => {
		console.log('data', data)
	}

	return (
		<OrgTree
			data={data}
			activeId={value}
			horizontal={horizontal}
			collapsable={collapsable}
			expandAll={expandAll}
			onClick={handleClick}
		/>
	)
}

属性

参数	说明	类型	默认值	是否必填
data	数据源	json	-	是
labelWidth	label项宽度	string | number	-	否
horizontal	是否水平	boolean	false	否
collapsable	是否可折叠	boolean	false	否
expandAll	是否全部展开	boolean	false	否
activeId	选中的id	string | number	-	否
node	data中的 id label expand children的字段，可以将数据源的字段进行替换	object	{id: 'id',label: 'label',expand: 'expand',children: 'children'}	否
labelClassName	label自定义类名	string	-	否
conditionClassName	conditionList自定义类名	string	-	否
onClick	点击label函数	(e: React.MouseEventHandler, data: any) => void	-	否
onConditionClick	点击conditionList时触发函数	(e: React.MouseEventHandler, data: any) => void	-
renderContent	处理label的数据，渲染label函数	(data: any) => void	-	否