1.0.9 • Published 4 years ago
taro-ztree v1.0.9
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 |