vue中element ui 中tree组件怎么自定义前缀图标呢?

9月前作者：张大牛Zz 分类：Toy博客阅读(50) 违法举报

这篇具有很好参考价值的文章主要介绍了vue中element ui 中tree组件怎么自定义前缀图标呢?。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一问题

element tree自定义图标,vue.js,前端,javascript,vue

饿了么ui 默认的图标样式是:

1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点,

2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占位但是空白的)

按照官网文档, 设置icon-class设置自定义图标代替默认箭头, 但是展开和收起等等的样式就比较难控制了, 所以我们这里采取自定义icon的方法.

二操作

1. 首先去除默认的icon, 直接在tree组件设置

element tree自定义图标,vue.js,前端,javascript,vue

效果

element tree自定义图标,vue.js,前端,javascript,vue

2. tree的插槽接收 data node, 并使用svg-icon组件(这个组件需要配置, 请自行百度) 根据node的expanded和data的children的length属性动态渲染对应图标

node.expanded : 节点的展开情况

data.children.length : 子节点的数组长度, 为0即没有子节点, 这里需要将数组转树, 不过会看这篇文章说明你肯定知道转树操作了, 不再赘述

element tree自定义图标,vue.js,前端,javascript,vue

效果

element tree自定义图标,vue.js,前端,javascript,vue

如果不想末端子节点有图标, 直接给设置display none文章来源地址https://www.toymoban.com/news/detail-547225.html

到了这里，关于vue中element ui 中tree组件怎么自定义前缀图标呢?的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

分享到：

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

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日
浏览(50)
Vue Element UI 自定义描述列表组件

效果图写在前面由于vue使用的版本太低，vue element UI 的描述列表不生效，但是有时候又不想换版本的可以自定义一个描述列表。实现哪些功能 1、每行的高度根据改行中某一列的最大高度自动撑开 2、列宽度自动补全，避免最后一列出现残缺的情况 3、支持纯文本与HTML插槽

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

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

2024年02月11日
浏览(44)
vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

打包时，报警告，提示包太大会影响性能在页面直接使用，直接使用 SVG 图标，当做一般的 svg 使用 icon使用时需要用以下两种方式方式：如果用在el-button里面的icon属性上使用，用SVG方式无效，还是需要引入再使用（不知道有没有其他方式）注意：使用 :icon=\\\"Edit\\\" 则icon的大

2024年02月06日
浏览(65)
【分页表格】Vue2 + Element UI实现自定义的分页表格组件（自定义Vue组件）

这篇文章，主要介绍Vue2 + Element UI实现自定义的分页表格组件（自定义Vue组件）。目录一、分页表格 1.1、运行效果 1.2、运行环境 1.3、案例代码

2024年02月11日
浏览(55)
vue项目element-ui上传组件自定义方法无法获取进度

原因：element-ui中的up-load组件使用时，若用自定义上传http-request，会重新申明XMLHttpRequest，on-progress里的申明则被覆盖，无法使用该钩子，无法添加进度条方案一：假进度条；写个假进度条优化用户体验，使用el-upload组件里on-change方法的status状态，配合定时器，以vue3为例，

2024年02月15日
浏览(50)
vue + element UI 表单中内嵌自定义组件的表单校验触发方案

在表单中，可能部分表单项需封装成自定义组件，如何在表单提交时，能同步触发自定义组件的表单校验？将表单绑定的变量传入自定义组件中，在自定义组件中定义表单校验规则内嵌自定义组件 srctestindex.vue srctestsearch_job.vue

2024年02月14日
浏览(44)
定制化图标——Element UI 组件图标替换指南

本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。 Element UI 是一款基于 Vue.js 的流行 UI 组件库，在前端开发中得到广泛应用。然而，在使用 Element UI 的组件时，我们有时可能需要替换

2024年02月05日
浏览(75)
vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例（组件封装）

在项目上常用使用到 el-select 和 el-tree 组合实现，记录下两者结合的实现过程。（代码以及注释清晰明了，代码直接使用即可）要求根据项目接口提供的数据，el-tree 里的数据是一次性返回来的，点击最后一层级时，请求接口，在点击层级下方追加数据追加的数据要显示勾

2024年04月15日
浏览(64)
vue3 + vite自定义封装vue + element-ui 表格组件，发布到npm包的全过程。

当我们项目中用到的表格太多的话，就会导致我们的代码量一直增加，所以我们要封装一个公共得组件，通过传参引入来使用，下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。提示我们要安装 create-vite@4.1.0 得依赖

2024年02月02日
浏览(66)