你也许不知道的element-ui(2)——自定义el-tree的label显示

830 阅读1分钟

我们先看官方el-tree效果

image.png

但是我们很多时候,会碰到这样的业务需求: 为了让树label显示更加直观,可能需要几个字段拼接起来。

image.png

我们该怎么办呢? ——先看文档

image.png

当我们看到这个函数,我想我们有了办法。

<el-tree :data="data" 
    show-checkbox 
    default-expand-all 
    node-key="id" 
    ref="tree" 
    highlight-current 
    :props="defaultProps"> 
</el-tree>
defaultProps: {
    children: "children",
    label: function(data, node) {
         return "[" + data.No + "]" + data.label;
    }
},