修改elementui tree中label的值

最新推荐文章于 2026-05-11 21:21:06 发布

原创最新推荐文章于 2026-05-11 21:21:06 发布 · 8k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

element-ui

本文详细介绍了在前端开发中如何使用El-Tree组件，通过设置defaultProps，展示数据中的`label`或`code`字段。通过示例代码展示了如何自定义`label`属性，以实现数据显示的灵活性，例如将`code`与`label`进行拼接。此外，还探讨了如何在`label`中实现显示其他字段的方法，为前端数据展示提供更多的定制选项。

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中可实现显示别的字段：

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

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