element组件库的tree给节点添加icon图标

最新推荐文章于 2024-07-03 16:36:20 发布

风~蒲公英

最新推荐文章于 2024-07-03 16:36:20 发布

阅读量2k

点赞数

分类专栏：前端h5 html vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44269229/article/details/120269052

版权

前端h5 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

本文档介绍了如何在Vue的组件库中，使用`el-tree`组件自定义节点结构，通过插槽方式添加`<span>`标签，并绑定类名与图标。示例代码展示了如何通过`node-key`、`:props`属性设置数据，以及在`data`中为每个节点添加`icon`属性来显示图标。同时，详细展示了多级树结构的数据结构。

摘要由CSDN通过智能技术生成

组件库的tree接点

<el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick">
</el-tree>

在树代码中间，增加span标签，通过:class绑定icon，通过label绑定树的名称

<el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick">
  <span class="custom-tree-node" slot-scope="{ node}">
    <span>
      <i :class="data.icon"></i>{{ node.label }}
    </span>
  </span>
</el-tree>

在data数据中，给每个对象绑定icon，值为需要的icon图标

data: [{
  label: '一级 1',
  icon:'el-icon-user',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1'
    }]
  }]
}, {
  label: '一级 2',
  icon:'el-icon-user',
  children: [{
    label: '二级 2-1',
    icon:'el-icon-user',
    children: [{
      label: '三级 2-1-1',
      icon:'el-icon-user',
    }]
  }, {
    label: '二级 2-2',
    children: [{
      label: '三级 2-2-1'
    }]
  }]
}, {
  label: '一级 3',
  children: [{
    label: '二级 3-1',
    children: [{
      label: '三级 3-1-1'
    }]
  }, {
    label: '二级 3-2',
    children: [{
      label: '三级 3-2-1'
    }]
  }]
}],

就可以啦其实用的就是类似插槽之类的方法；