黑豹程序员-ElementPlus支持树型组件带图标以及icon避坑

本文主要是介绍黑豹程序员-ElementPlus支持树型组件带图标以及icon避坑，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果

vue代码

参数说明：node当前节点，data当前节点后台传入数据。
el-tree自身不支持图标，需要自己去利于实现，并有个坑，和elementui写法不同。

        <el-col :span="12"><el-form-item label="绑定权限"><el-tree ref="permissTree" :data="dictTreeData" :highlight-current="true" show-checkbox default-expand-all  node-key="value"><template #default="{ node, data }"><span class="custom-tree-node"><el-icon><component :is="data.icon"></component></el-icon> {{node.label}}<span v-if="data.ctype === 3">（按钮）</span><span v-if="data.ctype === 4">（状态）</span></span></template></el-tree></el-form-item></el-col>

el-tree的坑

ElementUI的语法

<span class="custom-tree-node box" slot-scope="{ node, data }">

ElementPlus的语法

<template #default="{ node, data }">

这篇关于黑豹程序员-ElementPlus支持树型组件带图标以及icon避坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---