element-plus elplus el-tree三种图标自定义 并且点击图标展开收起 点击文字获取数据

前言
公司需求,需要实现如下样式的树形列表 (基于vue3 + element-plus)

当节点展开时,显示展开的文件夹图标,当节点收起时显示收起的文件夹,最后一级显示文件样式
废话没有了, 代码如下

<!-- 树形列表组件 -->
<template>
  <div class="tree-input" v-if="filter">
    <el-input v-model="filterText" clearable placeholder="输入关键字" />
  </div>
  <el-tree :data="treeDataList" highlight-current :node-key="nodeKey"
   :current-node-key="currentNodekey" :default-expanded-keys="defaultExpandedList"
  ref="treeRef" icon="none" :filter-node-method="fliterNode" :expand-on-click-node="false" >
    <template #default="{ data }">
      <div class="com-tree">
        <el-icon size="13" class="com-tree-icon" @click="toggleChild(data)" >
          <Document v-if="data.isLast" />
          <FolderOpened v-else-if="data.opened