修改elementui tree中label的值

最新推荐文章于 2024-08-15 17:48:43 发布

asteriaV

最新推荐文章于 2024-08-15 17:48:43 发布

阅读量7.1k

点赞数 10

分类专栏： element-ui

本文链接：https://blog.csdn.net/asteriav/article/details/116492024

版权

element-ui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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我的项目