修改elementui tree中label的值

末蓝、 2023-01-19 03:17 595阅读 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 条评论，595人围观）

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

相关阅读

相关解决ElementUI中默认样式的修改

一、问题描述：在ElementUI中，有的组件样式并不是我们所需要的，需要进行修改，对默认样式进行修改为目标样式，但是直接写样式是不成功的，修改不了的二、解决办法

矫情吗；*/ 2023年06月21日 11:24/ 0 赞/ 12 阅读

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

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

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

相关 el-tree 改变label

<el-tree :data="data" :props="treeProps" @click="showAdd()"></el-tree> treeProp

た入场券/ 2023年05月30日 04:57/ 0 赞/ 3 阅读

相关修改elementui tree中label的值

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

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

相关 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 赞/ 62 阅读

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

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

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

相关 vue+elementui tree

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

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

相关 ElementUI--个性化修改

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

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

相关 ElementUI Tree 树形控件

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

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

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

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

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