el-tree如何显示除了label以外的字段
时间: 2024-04-24 14:23:54 浏览: 31
在 el-tree 中,可以使用 `props` 属性来自定义节点的显示内容。除了 `label` 字段之外,你可以通过设置 `props` 中的其他字段来显示额外的内容。
以下是一个示例,展示如何显示除了 `label` 以外的字段:
```html
<template>
<el-tree :data="treeData" :props="treeProps">
<!-- 自定义节点内容 -->
<span slot-scope="{ node }">
<span>{{ node.data.name }}</span> <!-- 显示 'name' 字段 -->
<span>{{ node.data.age }}</span> <!-- 显示 'age' 字段 -->
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: 'Node 1',
name: 'John',
age: 25
},
{
label: 'Node 2',
name: 'Jane',
age: 30
}
],
treeProps: {
children: 'children', // 子节点的字段名,默认为 'children'
label: 'label' // 标签显示的字段名,默认为 'label'
}
};
}
};
</script>
```
在上述示例中,我们通过 `treeProps` 对象来自定义树的属性。我们将 `name` 和 `age` 字段添加到每个节点的数据中,并在自定义节点内容的部分使用它们来显示额外的字段内容。
请注意,这只是一个简单示例,你可以根据你的实际需求自定义节点的显示内容和字段。