UNPKG

zent

Version:

一套前端设计语言和基于React的实现

63 lines (58 loc) 1.25 kB
import React, { Component } from 'react'; import Tree from '../src/index'; import '../assets/index.scss'; /* 自定义节点展示方式,配置render属性。为了显示的正确性,请返回行级元素。 */ const treeData = [{ id: 1, title: '杭州有赞', content: '移动零售服务商', children: [{ id: 2, title: 'XXXXXX', content: 'We are dogs, We are dogs, We are dogs, We are dogs, We are dogs', children: [{ id: 5, title: '内部平台' }, { id: 6, title: '运维' }, { id: 7, title: '前端' }] }, { id: 3, title: '市场' }, { id: 4, title: '技术', children: [{ id: 8, title: '内部平台' }, { id: 9, title: '运维' }, { id: 10, title: '前端' }] }] }]; export default class Example extends Component { customRender(data) { return ( <span style={{ fontSize: 16, margin: 0, lineHeight: 1 }}> {data.title} { data.content ? <small style={{ display: 'block', fontSize: 10 }}>{data.content}</small> : '' } </span> ); } render() { return <Tree data={treeData} render={this.customRender} expandAll />; } }