el-tree使用Scoped Slot自定义树节点的内容

时间:2025-01-19 16:01:50

Element为我们提供了树形控件el-tree,不过在开发的过程中有时需求原因,需要重新定义树节点的内容,刚好官网就为我们提供了Scoped Slot。下面具体来看下怎么用吧~
在这里插入图片描述

<el-tree
        :data="trees"
        ref="treeList"
        node-key="tagId"
        :highlight-current="true"
        :default-expanded-keys="expandedkeys"
        :current-node-key="currentnodekey"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ data }">
          <span class="treeText1">
            <span  v-if=" &&  > 0"  class="el-icon-folder-opened" ></span>
            <svg-icon  v-else  class="nav-icon"  icon-class="tag"  :w="13"  :h="13" />
            {{  }}
          </span>
          <span v-if=" &&  > 0" class="treeText2" >({{  }})</span>
         </span>
      </el-tree>