文档地址: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("无子元素"); } },
效果:
。