Element-plus el-tree自定义图标插槽示例

示例一(插入iconfont)

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"  auto-expand-parent>
  <template v-slot:default="{data}" >
    <div class="custom-node" v-if="data.children !== undefined">
      <div class="row justify-between">
        <div class="col-2">
          <i class="iconfont">home</i>
        </div>
        <div class="col-9">
          <span>{{data.label}}</span>
        </div>
      </div>
    </div>
    <div class="custom-node" v-else>
      <span>{{data.label}}</span>
    </div>
  </template>
</el-tree>

示例二(element+ icon):

<el-tree 
      :data="treeData" 
      :props="defaultProps" 
      @node-click="handleNodeClick" 
      default-expand-all 
      highlight-current
      :expand-on-click-node="false"
>
  <template #default="{ node, data }">
      <span>
          <span>
              <el-icon v-if="!data.children" ><Tickets /></el-icon>
              <el-icon v-else-if="node.expanded"><FolderOpened /></el-icon>
              <el-icon v-else ><Folder /></el-icon>
          </span>
          <span>{{ node.label }}</span>
          <span v-if="node.level!=1">
              <el-button type="text" size="mini" @click.stop="append(data,'add')"> <el-icon><Plus /></el-icon></el-button>
              <el-button type="text" size="mini" style="margin-left: 8px" @click.stop="append(data,'edit')"><el-icon><Edit /></el-icon></el-button>
              <el-button type="text" size="mini" style="margin-left: 8px" @click.stop="remove(data,node)"><el-icon><Delete /></el-icon></el-button>
          </span>
      </span>
  </template> 
</el-tree>
上一篇
下一篇