先演示效果圖

代碼部分

  <el-dialog title="選擇資源保存路徑"
    :visible="dialogVisible"
    width="650px"
    @close="close"
    :destroy-on-close="true">
    <!-- destroy-on-close：關閉時銷毀 Dialog 中的元素，這樣能刷新 tree 控件懶加載 -->
    <div class="tree-contain">
      <el-tree
        node-key="id"
        lazy
        :load="loadNode"
        :props="defaultProps"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        v-loading="list.loading"
        @node-click="nodeClick"
        ref="tree">
        <div class="custom-tree-icon" slot-scope="{ node, data }">
          <i :class="['icon-color icon iconfont', (node.expanded && node.isLeaf) ? 'icon-folder' : 'icon-folder-open']"></i> 
          {{ data.name }}
        </div>
      </el-tree>
    </div>
  </el-dialog>

主要是這部分代碼

<div class="custom-tree-icon" slot-scope="{ node, data }">
  <i :class="['icon-color icon iconfont', (node.expanded && node.isLeaf) ? 'icon-folder' : 'icon-folder-open']"></i> 
  {{ data.name }}
</div>