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

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="data.list && data.list.length > 0"  class="el-icon-folder-opened" ></span>
            <svg-icon  v-else  class="nav-icon"  icon-class="tag"  :w="13"  :h="13" />
            {{ data.name }}
          </span>
          <span v-if="data.list && data.list.length > 0" class="treeText2" >({{ data.list.length }})</span>
         </span>
      </el-tree>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19