TREE

tree是list的升级,对于数据结构有特殊的要求,tree能够输出层次的结构

options

tree的属性设置与list设置保持一致

key type descript
data {Array[item, item...]} item的配置请参考这里
listClass {String} 列表容器的样式类
itemClass {String} 列表子项样式类
listStyle {JSON} 列表容器样式
itemStyle {JSON} 列表子项样式
itemMethod {Function} 列表子项mounted后执行该方法, 该方法带一个参数(dom),指向item的DOM结构
header {JSX} 为列表增加一个头部结构
footer {JSX} 为列表增加一个foot结构

提示: data选项为list提供数据支持,必须为数组类型,必须为约定型数据结构

tree的基本用法

tree可以兼容list的数据结构,但当我们需要输出层次结构时,需要使用idf, parent,来对数据结构进行调整

Demo:
Edit aotoo-tree
第一次访问需要翻墙,因为codesandbox有相关google的广告内容

import '@aotoo/aotoo'
import '@aotoo/aotoo-web-widgets'

const treeData = [
  {title: 'item子项', idf: 'root'},     // 父级
  {title: 'item子项', parent: 'root'},  // 子集
  {title: 'item子项', parent: 'root'},
  {title: 'item子项', parent: 'root'}
]

const jsx = aotoo.tree({
  data: treeData,
  listClass: '',
  itemClass: '',
  listStyle: '',
  itemStyle: ''
})