taro-zTree

taro版树形组件

安装

npm i -S taro-ztree

使用

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Tree from 'taro-ztree'
 
const data = [
  { key: 1, parent: 0, title: "普通的父节点",  open:true},
  { key: 11, parent: 1, title: "叶子节点 - 1", },
  { key: 12, parent: 1, title: "叶子节点 - 2",},
  { key: 13, parent: 1, title: "叶子节点 - 3", },
  { key: 34, parent: 11, title:  "叶子节点 - 1 - 1", },
  { key: 2, parent: 0, title: "NB的父节点", open:true},
  { key: 21, parent: 2, title: "叶子节点2 - 1", },
  { key: 22, parent: 2, title: "叶子节点2 - 2",},
  { key: 23, parent: 2, title: "叶子节点2 - 3",},
  { key: 3, parent: 0, title: "郁闷的父节点",  open:true},
  { key: 31, parent: 3, title: "叶子节点3 - 1",},
  { key: 32, parent: 3, title: "叶子节点3 - 2", },
  { key: 33, parent: 3, title: "叶子节点3 - 3",}
]
 
export class TreeDemo extends Component {
  checkNode (keys) {
    console.log('选中的节点为: ', keys)
  }
  render () {
    return (
      <View className='tree-demo'>
        <Tree treeData={data} checkedKeys={[32]} onNodeCheck={this.checkNode.bind(this)} />
      </View>
    )
  }
}

效果图

组件参数

参数名	说明	默认值
treeData	原始数据(Array)	[]
checkedKeys	默认选中的值(Array)	[]
open	是否展开节点(Bool)	false
showCheckBox	是否显示多选框(Bool)	true
showIcon	是否显示图标(Bool)	true
onNodeCheck	多选框选中时的回调，返回选中的值(Function)	null