Element UI 树型控件如何自定义节点图标？

Question

elememtUI树型控件如何设置节点图标

Answer 1

使用插槽slot-scope="{ node, data }"自定义label;
这块判断节点是第几层，给该层自定义图标
<img v-if="node.level === 4" style="width: 15px; height: 15px" src="../images/last-icon.png" alt=""/>

<el-tree
              ref="treeRef"
              node-key="id"
              icon-class="el-icon-arrow-right"
              highlight-current
              :default-expanded-keys="defaultExpandKeys"
              :key="treeKey"
              :data="treeData"
              :expand-on-click-node="false"
              :current-node-key="defaultExpand"
              :indent="8"
              :props="defaultProps"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            >
              <div
                class="tree-node"
                slot-scope="{ node, data }"
              >
                <div class="label">
                  
                    <span
                      class="title ellipsis"
                      @mouseover="onShowNameTipsMouseenter"
                    >
                      <img
                        v-if="node.level === 4"
                        style="width: 15px; height: 15px"
                        src="../images/last-icon.png"
                        alt=""
                      />
                      <div class="text">{{ data.nodeName }}</div>
                    </span>
                 
                  <span v-if="data.children?.length" class="num"
                    >（{{ data.children.length }}）</span
                  >
                </div>
               
              </div>
            </el-tree>

效果如下：

Answer 2

<el-tree node-key="id" :data="treeData">
    <div slot-scope="{ node, data }">
    </div>
</el-tree>

在el-tree组件内部定义一个div，该div是一个默认插槽，可以替代tree节点的展示，在官网中有说明

<el-tree node-key="id" :data="treeData">
    <div slot-scope="{ node, data }">
        <span>你的图标</span>
        <span>{{data.label}}</span>
    </div>
</el-tree>

你也可以通过node.level来判断当前的节点是第几级，对对应节点做特殊样式处理

<el-tree node-key="id" :data="treeData">
    <div slot-scope="{ node, data }">
        <span v-if="node.level == 2">二级图标</span>
        <span v-else-if="node.level == 3">三级图标</span>
        <span v-else>标准图标</span>
        <span>{{data.label}}</span>
    </div>
</el-tree>