Vue中如何使用el-tree组件实现树形数据展示？

本文共计459个文字，预计阅读时间需要2分钟。

在Vue中使用`el-tree`组件并为其添加自定义图标和点击事件，可以按照以下步骤进行：

vue {{ node.label }}

.custom-tree-node i { margin-right: 8px;}

这段代码中，`el-tree`组件被用于展示树形结构数据。每个节点都通过`template`插槽自定义了图标和标签的显示方式。`node-click`事件用于处理节点的点击事件，将节点的数据打印到控制台。

目录

• el-tree @node-click传自定义参数
• 给el-tree添加自定义图标

el-tree @node-click传自定义参数

<el-tree node-click="(data, node, item) => nodeClick(data, node, item, param)"></el-tree>

nodeClick(data, node, item, param) {     console.log(data)   // data,node,item为默认参数     console.log(node)     console.log(item)     console.log(param)    // param为自定义的参数 }

给el-tree添加自定义图标

<el-tree v-if="treeVisible" ref="tree" :props="Props" node-key="id" :default-expanded-keys="level" style="height:120vh" :allow-drop="allowDrop" draggable accordion :allow-drag="allowDrag" lazy :load="loadNode" @node-click="handleNodeClick" @node-contextmenu="rihgtClick" @node-drag-start="ondeDrag" > <span slot-scope="{ node, data }"> <i :class="data.icon" style="font-size:0.3rem" /> <span style="padding-left:4px;font-size:0.3rem">{{ data.name }}</span> </span> </el-tree>

主要思路就是，在el-tree标签里添加：

<span slot-scope="{ node, data }">             <i :class="data.icon" style="font-size:0.3rem" />             <span style="padding-left:4px;font-size:0.3rem">{{ data.name }}</span> </span>

注意：

这里用到了el-tree的懒加载所以没有绑定data属性。

懒加载代码是：

el-tree标签添加属性和方法：

:props=“Props” lazy :load=“loadNode”

data里声明props：

Props: { children: ‘children', label: ‘name', isLeaf: ‘leaf' }

在懒加载方法里，必须要给data定义icon属性，指明图标名称。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。