hy-virtual-tree

// 自定义渲染元素
export type CustomRenderFn = (
data: TreeNodeData,
node: TreeNode
) => Element | string | any

// 业务类型 device-设备 groupDevice-群组设备
type Business = 'device' | 'groupDevice'
export interface VirtualTreeProps {
container: string | HTMLElement
data: TreeData
emptyText?: string // 内容为空的时候展示的文本
props?: Partial
business?: Business
itemHeight?: number
itemGap?: number
color?: string // 字体颜色
fontSize?: number // 字体大小
bgColor?: string // 背景颜色
nodeBgColor?: string // 节点背景颜色
bufferSize?: number
indent?: number
expandOnClickNode?: boolean // 是否在点击节点的时候展开或者收缩节点
checkOnClickNode?: boolean // 是否在点击节点的时候选中节点
checkOnClickLeaf?: boolean // 点击叶节点(最后一个子节点)时是否检查或取消节点
checkOnDblclickParentNode?: boolean // 双击父节点会触发选中功能
rowSelection?: RowSelection
handleMethod?: (data: TreeNodeData) => TreeNodeData // 初始化自定义处理数据
filterMethod?: (params: any, data: TreeNodeData, node: TreeNode) => boolean // 自定义过滤方法
renderIcon?: CustomRenderFn // 自定义渲染图标
renderItem?: CustomRenderFn // 自定义渲染内容
renderStatus?: CustomRenderFn // 自定义状态文本
onNodeClick?: (data: TreeNodeData, node: TreeNode, e: MouseEvent) => void // 当节点被鼠标左键点击的时候触发
onNodeContextmenu?: (
data: TreeNodeData,
node: TreeNode,
e: MouseEvent
) => void // 当节点被鼠标右键点击的时候触发
onNodeExpand?: (data: TreeNodeData, node: TreeNode) => void // 节点展开回调事件
onNodeCollapse?: (data: TreeNodeData, node: TreeNode) => void // 节点收起回调事件
onLoad?: () => void // 完成初始化回调函数
// 设备业务配置
deviceConfig?: {
deviceStatusMap: {} // 状态文案
}
}

// 业务类型声明
// 设备状态(data.deviceStatus) 0-离线 1-在线 2-监控中 3-通话中 4-录像中 5-录音中 6-广播中 7-SOS
export type DeviceStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
// 业务数据类型(data.dataType) 1-部门 3-设备 4-群组 5-用户 6-考勤 7-水源点 8-采集站
export type DataType = 1 | 3 | 4 | 5 | 6 | 7 | 8