Element UI-给树形控件添加图标

这篇具有很好参考价值的文章主要介绍了Element UI-给树形控件添加图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Element UI-给树形控件添加图标

element ui 提供的树形控件默认是不支持添加图标的,如下所示:
el-tree添加图标,Element UI,elementui

如果要想要在节点自定义树形控件的图标,可以使用slot-scope,代码如下:
el-tree添加图标,Element UI,elementui

其代码如下:

<!--
    @author: itmacy
    @desc: 自定义树节点图标
-->
<template>
  <div>
        <el-tree
                :data="data"
                :props="defaultProps"
                @node-click="handleNodeClick">
                  <span slot-scope="{ node, data }">
                        <i v-if="data.children" class="el-icon-folder"></i>
                        <i v-else class="el-icon-collection-tag"></i>
                        <span style="margin-left: 10px">{{ node.label}}</span>
                  </span>
        </el-tree>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            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'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    methods: {
      handleNodeClick (data) {
        console.log(data)
      }
    }
  }
</script>

最终效果如下:
el-tree添加图标,Element UI,elementui文章来源地址https://www.toymoban.com/news/detail-715727.html

到了这里,关于Element UI-给树形控件添加图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI-给树形控件添加图标

    element ui 提供的树形控件默认是不支持添加图标的,如下所示: 如果要想要在节点自定义树形控件的图标,可以使用slot-scope,代码如下: 其代码如下: 最终效果如下:

    2024年02月08日
    浏览(45)
  • 【el-tree】树形组件图标的自定义

    饿了么树形组件的图标自定义 默认样式:  可以看到el-tree组件左侧自带展开与收起图标,咱们可以把它 隐藏 :: 我的全部代码 其中自定义左侧图标的方法:  我的每条数据都自带icon属性,你没有的话也可以在数据拿到之后手动遍历添加一条icon属性进去,然后再el-tree中使用: 如果需

    2024年02月11日
    浏览(45)
  • Element UI中el-tree 添加右键菜单的方法,附带问题和解决方案

    1、在el-tree 中添加方法 @node-contextmenu=\\\"rightClick\\\" 2、建立一个右键组件,可以使用 el-menu 组件,优点是,可以借助el-menu 的 selec方法进行增删改查以及样式不用手写了,弊端是不容易获取点击的Dom,先暂时这样写吧 3、methods中的写法 3、点击树状节点时,关闭右键组件 4、css样式

    2024年02月04日
    浏览(44)
  • 在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件

    有时遇到一些需求就是在使用树形控件时,服务端并没有一次性返回所有数据,而是返回首层节点列表。然后点击展开首层节点中的某个节点,再去请求该节点的子节点列表,那么就得用上懒加载的机制了。在此以ElementPlus的树形控件为例,实现一个具有懒加载的树形控件的

    2024年02月06日
    浏览(65)
  • VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开(收起);一键全选(不全选)

    实现步骤: tree组件部分: ts部分: 页面效果: 默认状态 展开状态 折叠状态 全选状态 全不选状态 注意:以上方法会展开或折叠所有节点;全选或全不选节点。 问题:数据量过大以上操作会有明显卡顿;有高效解决方法的朋友可以交流。

    2024年04月11日
    浏览(47)
  • element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解

    实现代码: 按钮: 组件:  在ref中绑定folderTreeRef  展开收起: 效果: 实现原理: 打印上面的   folderTreeRef ,可以从原型链的 store 中找到 _getAllNodes 属性 官方文档好像没有描述关于此属性的内容,查了好多资料,搜了多篇文章,可以发现 store 原型中有 _getAllNodes 这个属性

    2024年01月20日
    浏览(52)
  • element-ui控件el-select如何在前面添加icon图标

    在element-ui中input可以使用prefix-icon=“el-icon-user” 在前面添加icon图标,但是select自己没有该属性。那么如何在element-ui控件el-select前面前面icon图标 代码如下(示例): 这里使用了 template #prefix 来替换,因为我使用的是element-plus ,如果使用的是element-ui 则直接使用slot替换

    2024年02月11日
    浏览(54)
  • el-tree自定义图标,使用图片或者dom自定义图标,element-plus

    el-tree自定义左侧的图标,有很多方法 第一种:通过css类获取到el-tree-node__expand-icon图表类,然后通过设置类名,修改css样式来改变图标。 第二种:通过js直接将el-tree-node__expand-icon元素移除,直接替换掉DOM。 以上两种都是比较刻板的方法,第一种适用于element-ui。 第三种:el

    2024年02月14日
    浏览(53)
  • elemet-ui el-tree树形结构,子级选择框不显示,只选择父级

    如下图: elemet-ui如下: :check-strictly=“true” 设置为父级子级不关联。 Js修改显示样式:

    2024年02月07日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包