0
点赞
收藏
分享

微信扫一扫

uniapp:Tree组件

下载导入链接: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));
        }
    }
};

举报

相关推荐

0 条评论