ElementUI tree 自定义节点

catalogData:[{
    id: '1',
    versionNumber: '2.3.9'
}]

<el-tree
    :data="catalogData"
    class="catalogTree"
    ref="catalogTree"
    highlight-current
    node-key="id"
    :expand-on-click-node="false"
    :props="{ label: 'versionNumber' }"
    @node-click="catalogTreeNodeClickEvent">
    <span class="customTreeNode" slot-scope="{ node, data }">
        <span class="nodeIcon" :class="data.nodeType == 'folder' ? 'iconFolder' : 'iconOther'"></span>
        
        // 使用node参数 需设置 :props="{ label: 'versionNumber' }" 设置成字段名
        <span class="nodeText">{{ node.label }}</span>
        
        // 使用data参数 可删除:props属性，直接使用字段名
        <span class="nodeText">{{ data.versionNumber }}</span>

    </span>
</el-tree>

ElementUI tree 自定义节点node参数.png