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

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>
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值