element-ui樹形控件自定義節點

文檔地址：https://element.eleme.cn/#/zh-CN/component/tree

                   <el-tree :data="data" 
                        :props="defaultProps" 
                        @node-click="handleNodeClick">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <a v-if="data.url" :href="data.url" target="_blank" > 
                                {{ node.label }}
                            </a>
                            <span v-else> 
                                <i :class="node.icon"></i>{{ node.label }}
                            </span>
                            
                        </span>
                    </el-tree>

數據：

           data: [
                    {
                        
                        label: '一級 1',
                        children: [
                            {
                                label: '二級 1-1',
                                children: [{label: '三級 1-1-1',url:"http://kexiepingtaieposter.hoohui.cn//registFile/fa5df7c9-445d-4b58-97c4-ad8b86a92241/Z0134_20200311163742.jpeg"}]
                            }
                        ]
                    }, 
                    {
                        label: '一級 2',
                        children: [
                            {
                                label: '二級 2-1',
                                children: [{label: '三級 2-1-1'}]
                                
                    }, 
                {
                    label: '二級 2-2',
                    children: [{
                    label: '三級 2-2-1'
                    }]
                }]
                }, 
                {
                label: '一級 3',
                children: [{
                    label: '二級 3-1',
                    children: [{
                    label: '三級 3-1-1'
                    }]
                }, 
                {
                    label: '二級 3-2',
                    children: [{
                    label: '三級 3-2-1'
                    }]
                }]
            }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },

 

methods：

handleNodeClick(data) {//點擊樹形組件事件
            console.log(data);
            if(!data.hasOwnProperty("children")){
                console.log("無子元素");
            }
        },

效果：

 

 

 

。