ElementUI的el-tree分级标签和图标显示

于 2023-08-19 15:28:44 发布
阅读量405 收藏
点赞数
分类专栏： Web使我精神焕发 文章标签： 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52130160/article/details/132380167
版权

el-tree文档链接：组件 | Elementicon-default.png?t=N6B9https://element.eleme.cn/#/zh-CN/component/tree首先，我们先看看el-tree文档中props的参数

看看针对不同的数据来源如何进行绑定 

1.数据的label相同

 2.数据的label不相同

然后呢，怎么解决，继续看文档，发现这个slot,就有了如下的解决方法，这个level在文档里面我没看到，询问了大佬才知道！！！

 

 

 根据leve对父子数据的不同去显示不同的label数据，也添加不同的操作按钮，根据实际需求去运用。当初这个样式研究了好久，希望对大家有帮助！

不吃葡萄不吐葡萄籽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree 去除默认的图标
Charliecheu的博客
03-31 1352
el-tree 去除默认的图标 通过icon-class可以设定左侧的小图标，如果不想要的话，icon-class=“none”，就可以去掉，none不是必须的，任何一个不是icon的图标名都可以，因为这样它匹配不到icon，就会不显示，用空字符串不行，会使用默认样式 ...
el-tree懒加载去掉打开icon
qq_39051390的博客
05-23 1062
场景：现在需要一棵树，已知只有三层，且是懒加载的，官方示例里面，即使是叶子节点，也是先点击加载后才判断其是叶子节点，这时才取消掉打开的icon，现在需要打开第二层时，第三层叶子节点是没打开的icon的，我的解决方式是： success: (res) => { if (res.code === 0) { resolve(res.data); node.childNodes.forEach(item=>{ item.isLeaf=true }) } }
element里的el-tree树形控件去除icon图标
m0_57426442的博客
08-17 1984
el-tree树形控件去除icon图标和禁止折叠
vue2中 elementUI tree树一键展开/关闭
m0_53195432的博客
03-27 974
vue2中 elementUI tree树一键展开/关闭
element-ui树形数据不显示展开图标解决方案
it浅阳的博客
10-28 6073
问题描述： 在使用element-ui的下图组件时，出现有子节点的记录不能显示展开的图标 相关代码: <template> <div class="app-container"> <el-table :data="list" style="width: 100%" row-key="id" border lazy :load="getChildrens
VUE element Tree 没有子级时隐藏展开图标
xuexi0754的博客
05-11 1959
HTML 先给树结构添加一个props JS 在data中添加 defaultProps: { children: 'children', label: 'id', isLeaf: (data, node) => { if (node.level === 2) { return true } } }, CSS 最后用css隐藏 /deep/ { .is-leaf::before { // 隐
vue+elementui 写el-tree时可以获取值但是不能显示解决
m0_61689817的博客
04-03 4085
el-tree
element-ui icon不显示解决办法
热门推荐
Candy529629的博客
06-03 1万+
因为使用的icon是新版本出的 旧版本不带有这些icon 可以更新element-ui的版本 首先在package.json文件把element-ui的版本改成2.8.2，然后npm install 下载就可以了 ...
小白都会的前端技能---修改element-ui里面的tree组件的icon图标
weixin_71171795的博客
12-27 7178
修改element-ui组件的tree树形组件的icon字体图标
el-tree 自定义连线及图标
最新发布
m0_67793437的博客
08-07 1244
实现的效果如上图。
ElementUI中el-tree节点的操作的实现
10-15
主要介绍了ElementUI中el-tree节点的操作的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
el-tree 饿了么树状控件自定义节点的显示图标
lookingForw_4585的博客
03-01 3640
el-tree 饿了么树状控件自定义节点的显示图标效果展示实现代码替换小三角为图标 效果展示 el-tree组件默认显示时，节点是不带icon的，如需使用时，可以通过自定义插槽的方式来实现，实现方式在网络上也存在很多，本篇只简单记录个人如何实现。 功能点： 替换默认显示的小三角图标 展开即关闭节点时图标切换 子节点的默认显示图标 实现代码 <template> <div class="tree"> <el-tree :data="data5"
【Vue项目实战7】【ElementUI样式优化】el-tree==＞添加分级图标==＞添加引导线样式==＞【node-click】点击节点展示全部父节点信息==＞使用$store封装全局组件使用
Sabrina_cc的博客
06-20 4271
【Vue项目实战7】【ElementUI样式优化】el-tree==>添加分级图标==>添加引导线样式==>【node-click】点击节点展示全部父节点信息==>使用$store封装全局组件使用
el-tree的内外层数据结构不一致
XMCYD的博客
06-02 1234
在使用 el-tree 组件时，内外层数据格式和属性名并不一定要一致。但是，如果内外层数据格式和属性名一致，使用起来会更加方便和简单。
Element UI-给树形控件添加图标
itmacy的博客
05-17 5197
Element UI -给树形控件添加图标
el-tree自定义展示图标
风如也的博客
04-23 1591
先演示效果图 代码部分 <el-dialog title="选择资源保存路径" :visible="dialogVisible" width="650px" @close="close" :destroy-on-close="true"> <!-- destroy-on-close：关闭时销毁 Dialog 中的元素，这样能刷新 tree 控件懒加载 --> <div class="tree-contain">
elementui el-tree全部选中
07-28
要将 ElementUI 的 el-tree 全部选中，你可以使用 el-tree 的 `setCheckedKeys` 方法。 首先，你需要获取 el-tree 的所有节点的 key 值。可以通过遍历树的每个节点，将它们的 key 值保存到一个数组中。 然后，使用 `setCheckedKeys` 方法将这个数组作为参数传递进去，即可将 el-tree 的所有节点选中。 以下是一个示例代码： ```javascript // 获取 el-tree 所有节点的 key 值 function getAllNodeKeys(treeData, keyArr) { treeData.forEach((node) => { keyArr.push(node.key); if (node.children && node.children.length > 0) { getAllNodeKeys(node.children, keyArr); } }); } // 在 mounted 钩子函数中使用 mounted() { // 获取 el-tree 的根节点数据 const treeData = this.$refs.tree.store.root.childNodes; // 获取所有节点的 key 值 const allNodeKeys = []; getAllNodeKeys(treeData, allNodeKeys); // 将 el-tree 的所有节点选中 this.$refs.tree.setCheckedKeys(allNodeKeys); } ``` 注意，在上述代码中，`this.$refs.tree` 是 el-tree 组件的引用，你需要根据你的实际情况进行调整。 希望对你有所帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值