修改elementui tree中label的值

末蓝、 2023-01-19 03:17 575阅读 0赞

1.defaultProps中 label: 'label',则显示数据中label的值

<el-tree :data="data" default-expand-all>
         <span class="custom-tree-node" slot-scope="{data }">
              <span>
                  {
       {data.code}}{
       { data.label}}
                </span>
           </span>
     </el-tree>

data: [
                  {id:1,code:101,label:'我的项目'},
                  {id:2,code:102,label:'我的名称'}
           ],
            defaultProps: {
              children: 'children',
              label: 'label',
            },

也可改为其他值,如

defaultProps: {
              children: 'children',
              label: 'code',
            },

2.props只能识别label，在label中可实现显示别的字段：

![20210507142035745.png][]

defaultProps: {
              children: 'children',
              label: function(data,node){
                console.log(data,node)
                return data.code+data.label
              },
            }

这样返回的值就变成了code+label的拼接值了。如：101我的项目

[20210507142035745.png]: /images/20221021/0e3b73e3bdb644c4a7b547877ea8c743.png

发表评论取消回复

表情：

评论列表（有 0 条评论，575人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue elementUI 覆盖el-tree的样式，选中的背景颜色修改

<style> .el-tree-node.is-current > .el-tree-node__content { background

朴灿烈づ我的快乐病毒、/ 2023年06月11日 06:28/ 0 赞/ 20 阅读

相关修改elementui tree中label的值

1.defaultProps中 label: 'label',则显示数据中label的值 <el-tree :data="data" default-expand-a

末蓝、/ 2023年01月19日 03:17/ 0 赞/ 576 阅读

相关 vue基于elementUI下拉Select同时获取value和label的值

[https://blog.csdn.net/qq\_33592641/article/details/107245334][https_blog.csdn.net_qq_33

￡神魔★判官ぃ/ 2023年01月02日 03:19/ 0 赞/ 48 阅读

相关 ElementUI Tree 树形结构展示

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

蔚落/ 2022年12月16日 13:18/ 0 赞/ 203 阅读

相关 .Net 提交页面，js修改的Label值会丢掉

.Net 提交页面，js修改的Label值会丢掉版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链

亦凉/ 2022年11月19日 01:08/ 0 赞/ 81 阅读

相关 vue+elementui tree

[tree 同级拖拽功能][tree] [tree 任意级别拖拽功能][tree 1] [Tree树形控件的拖动排序][Tree] [tree]: https://bl

阳光穿透心脏的1/2处/ 2022年10月08日 12:29/ 0 赞/ 212 阅读

相关 ElementUI--个性化修改

原文网址：[ElementUI--个性化修改\_IT利刃出鞘的博客-CSDN博客][ElementUI--_IT_-CSDN] 其他网址展开/折叠效果菜单

以你之姓@/ 2022年09月03日 01:23/ 0 赞/ 178 阅读

相关 ElementUI Tree 树形控件

一、概述用清晰的层级结构展示信息，可展开或折叠。官方网站：[https://element.eleme.cn/\/zh-CN/component/tree][htt

矫情吗；*/ 2022年08月28日 13:53/ 0 赞/ 297 阅读

相关 JS和Jquery获取和修改label的值的示例代码

JS和Jquery获取和修改label的值的示例代码一、label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值，下面有个不错的示例，希望大家

喜欢ヅ旅行/ 2022年06月03日 00:17/ 0 赞/ 138 阅读

相关 ElementUI中el-tree节点的操作

其实tree的有些方法用起来是很方便的， this.$refs.tree.getCheckedKeys()；这个原生态的方法。官方文档上说的是，返回一个数组。有了这个方法，

旧城等待，/ 2022年05月19日 04:59/ 0 赞/ 272 阅读