下载导入链接:https://ext.dcloud.net.cn/plugin?id=1000
<template>
<ly-tree :tree-data="treeData"
:props="props"
node-key="personId"
@node-expand="handleNodeExpand"
@node-click="handleNodeClick">
</ly-tree>
</template>
import LyTree from '@/components/ly-tree/ly-tree.vue'
export default {
components: {
LyTree
},
data() {
return {
ready: false,
// 如果想自定义函数渲染节点名称等,需要将props设置成返回配置对象的函数,否则如果props是一个对象(uni会将对象中的函数过滤掉),对象中的函数属性会被过滤掉
props: function() {
return {
// 这里的label就可以使用函数进行自定义的渲染了
label(data, node) {
return '节点' + node.data.personName;
},
// label: 'personName', // 指把数据中的‘personName’当做label也就是节点名称
children: 'childs' // 指把数据中的‘childs’当做children当做子节点数据
}
},
// 如果只是单纯的从数据中取某一个字段作为对应属性,props可以直接设置为对象
// props: {
// label: 'personName', // 指把数据中的‘personName’当做label也就是节点名称
// children: 'childs' // 指把数据中的‘childs’当做children当做子节点数据
// },
treeData: [{
personId: 1,
personName: '一级 1',
childs: [{
personId: 11,
personName: '二级 1-1',
childs: [{
personId: 111,
personName: '三级 1-1-1'
}]
}]
}, {
personId: 2,
personName: '一级 2',
childs: [{
personId: 21,
personName: '二级 2-1',
childs: [{
personId: 211,
personName: '三级 2-1-1'
}]
}, {
personId: 22,
personName: '二级 2-2',
childs: [{
personId: 221,
personName: '三级 2-2-1'
}]
}]
}, {
personId: 3,
personName: '一级 3',
childs: [{
personId: 31,
personName: '二级 3-1',
childs: [{
personId: 311,
personName: '三级 3-1-1'
}]
}, {
personId: 32,
personName: '二级 3-2',
childs: [{
personId: 321,
personName: '三级 3-2-1'
}]
}]
}]
};
},
methods: {
// uni-app中emit触发的方法只能接受一个参数,所以会回传一个对象,打印对象即可见到其中的内容
handleNodeClick(obj) {
console.log('handleNodeClick', JSON.stringify(obj));
},
handleNodeExpand(obj) {
console.log('handleNodeExpand', JSON.stringify(obj));
}
}
};