el-tree动态设置图标
时间: 2023-08-20 14:10:10 浏览: 66
您可以使用 Element UI 的 el-tree 组件来实现动态设置图标。以下是一个示例代码:
```vue
<template>
<el-tree :data="treeData" :props="defaultProps" node-key="id">
<span class="custom-icon" slot-scope="{ node }">
<i :class="getIcon(node)"></i> {{ node.label }}
</span>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: "Node 1",
children: [
{
id: 11,
label: "Node 1-1"
},
{
id: 12,
label: "Node 1-2"
}
]
},
{
id: 2,
label: "Node 2"
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
getIcon(node) {
// 根据节点的某个属性值来动态设置图标
if (node.id === 1) {
return 'el-icon-folder';
} else if (node.id === 11) {
return 'el-icon-document';
} else {
return 'el-icon-circle-plus-outline';
}
}
}
};
</script>
<style>
.custom-icon i {
margin-right: 5px;
}
</style>
```
在上面的示例中,我们使用了 `slot-scope` 来自定义节点的渲染。通过 `getIcon` 方法,我们可以根据节点的属性值来设置不同的图标。您可以根据自己的需求修改 `getIcon` 方法中的逻辑来动态设置图标。
希望以上信息对您有所帮助!如果您有任何疑问,请随时提问。