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

已于 2023-01-02 21:04:16 修改
阅读量2k 收藏 4
点赞数
文章标签： vue.js 前端 javascript vue
于 2022-12-27 21:04:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59650449/article/details/128461215
版权

一 问题

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

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

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

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

二 操作

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

效果 

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

node.expanded : 节点的展开情况

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

 效果

如果不想末端子节点有图标, 直接给设置display none

张大牛Zz
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element-ui tree组件自定义节点使用方法代码详解
10-18
本文通过实例代码给大家介绍了Element-ui tree组件自定义节点使用方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue中正确使用Element-UI组件的方法实例
10-14
主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element树组件自定义图标、字体大小高亮以及竖线设置
behance的博客
06-28 4349
如果只使用一种图标就可以直接用另一种。
elementUI el-tree 自定义节点图标
m0_64491262的博客
06-20 3591
el-tree自定义节点图标
2024年Web前端最新ElementUI：项目中引入自己的ICON(4)，2024年最新面试官问的那些Web前端原理你都懂吗
2401_84435838的博客
05-11 1006
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue element-ui tree组件，根据不同的状态显示不同的字体颜色添加自定义图标或者图片
m0_51551000的博客
03-20 718
vue element-ui tree组件，根据不同的状态显示不同的字体颜色添加自定义图标或者图片
element ui, el-tree, 自定义图标
gaowxx的博客
04-09 695
【代码】element ui, el-tree, 自定义图标。
vue中ElementUI Tree树形控件的树节点checkbox图标设置方法
EdwardLiu601的博客
07-24 5058
vue中ElementUI Tree树形控件的树节点checkbox图标设置方法
element tree 自定义图标 自定义组件
笔记库
08-20 4941
以下内容来自element官方文档： 可以通过两种方法进行树节点内容的自定义：render-content和 scoped slot。使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持...
基于Vue和Element UI的聊天室组件库设计源码
04-12
本项目基于Vue和Element UI开发，包含336个文件，包括GIF动画、JavaScript脚本、PNG图片、Vue组件、SCSS样式表、JPG图片、ZIP文件、Markdown文档、JSON配置文件和WAV音频文件。系统实现了基于Vue和Element UI的聊天...
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
10-16
在Vue项目中，Element-UI库提供了一个名为`Notification`的组件，用于创建全局的通知提示。这个组件在默认情况下提供了一些基本的配置选项，但有时我们可能需要更自定义的功能，比如添加自定义按钮或者控制多个通知...
基于Vue和Element UI的动态表单组件设计源码
04-15
基于Vue和Element UI的动态表单组件设计源码，该项目包含217个文件，主要文件类型有95个Vue前端文件，78个JavaScript文件，10个json配置文件，6个gif动画文件，5个Markdown文档，5个HTML页面文件，4个CSS样式文件，3...
vue + element ui工程，Tree 树形控件展示指定值，比如name
03-09
首先，`Tree`组件在Element UI中的基本用法是通过`data`属性来传入节点数据，每个节点数据对象通常包含`label`字段，用于显示节点的文本。然而，根据项目需求，我们可能需要展示其他字段，例如`name`。要实现这一...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
基于Vue和Element UI的图标选择器组件设计源码 - e-icon-picker
最新发布
05-29
本源码提供了一个基于Vue和Element UI的图标选择器组件的设计。项目包含120个文件，其中包括48个SVG文件、27个JavaScript文件、12个Vue文件、3个JSON文件、3个CSS文件、3个TypeScript文件，以及用于配置和资源的文件...
element-ui组件table实现自定义筛选功能的示例代码
10-17
主要介绍了element-ui组件table实现自定义筛选功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
自定义给 element el-tree节点加icon图标
weixin_44754351的博客
08-04 7668
给 element树组件 el-tree自定义icon图标： 可以通过插槽的方式： <el-tree :data="treeData" default-expand-all node-key="id" ref="tree" @node-click="nodeClick" :props="defaultProps" highlight-current :expand-on-click-node="false" style="he
element tree树形控件自定义图标以及隐藏自带箭头
Harley567
02-13 2366
element tree树形控件自定义图标以及隐藏自带箭头
ElementUI el-tree 树形控件给节点添加图标
Kimser
09-03 2726
<template> <div class="tree"> <el-tree :data="data5" node-key="id" default-expand-all > <span class="custom-tree-node" slot-scope="{ node, data }"> <span> <i :class="da.
vue2 封装element ui tree 组件
04-02
Vue2 封装 Element UI Tree 组件的步骤如下： 1. 安装 Element UI ```bash npm install element-ui --save ``` 2. 在 main.js 中引入 Element UI ```js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 创建 Tree.vue 组件 ```vue <template> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"> </el-tree> </template> <script> export default { name: 'Tree', props: { data: { type: Array, default: () => [] }, defaultProps: { type: Object, default: () => ({ children: 'children', label: 'label' }) } }, methods: { handleNodeClick(node) { this.$emit('node-click', node) } } } </script> ``` 4. 在需要使用 Tree 的组件中引入 Tree 组件 ```js import Tree from './Tree.vue' export default { name: 'MyComponent', components: { Tree }, data() { return { treeData: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1' }, { label: '三级 1-1-2' } ] }, { label: '二级 1-2', children: [ { label: '三级 1-2-1' }, { label: '三级 1-2-2' } ] } ] }, { label: '一级 2', children: [ { label: '二级 2-1', children: [ { label: '三级 2-1-1' }, { label: '三级 2-1-2' } ] }, { label: '二级 2-2', children: [ { label: '三级 2-2-1' }, { label: '三级 2-2-2' } ] } ] } ], defaultProps: { children: 'children', label: 'label' } } }, methods: { handleNodeClick(node) { console.log(node) } } } ``` 5. 在组件模板中使用 Tree 组件 ```vue <template> <div> <tree :data="treeData" :default-props="defaultProps" @node-click="handleNodeClick"> </tree> </div> </template> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值