iview Tree加图标
时间: 2024-04-24 07:25:58 浏览: 83
iview树添加图标
您可以使用iview Tree组件的自定义节点模板功能来给节点添加图标。下面是一个示例代码:
```vue
<template>
<Tree :data="treeData" :render="renderContent"></Tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
title: 'Node 1',
icon: 'ios-folder',
children: [
{
title: 'Leaf 1-1',
icon: 'ios-document'
},
{
title: 'Leaf 1-2',
icon: 'ios-document'
}
]
},
{
title: 'Node 2',
icon: 'ios-folder',
children: [
{
title: 'Leaf 2-1',
icon: 'ios-document'
},
{
title: 'Leaf 2-2',
icon: 'ios-document'
}
]
}
]
}
},
methods: {
renderContent(h, { node, data }) {
return (
<span>
<Icon type={data.icon} style="margin-right: 8px" />
{node.title}
</span>
)
}
}
}
</script>
```
在上面的代码中,我们通过在`treeData`数组中为每个节点添加了`icon`属性来指定节点的图标。然后,在`renderContent`方法中,我们使用iview的`Icon`组件来渲染图标,并将节点的标题与图标一起显示。
您可以根据自己的需求修改图标的类型,具体可用的图标类型请参考iview官方文档。希望能对您有所帮助!
阅读全文