mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-04 21:18:14 +08:00
1.0 KiB
1.0 KiB
#### 自定义图标
可以针对不同的节点定制图标。
#### Customize Icon
You can customize icons for different nodes.
<template>
<a-tree
:treeNodes="treeData"
showIcon
defaultExpandAll
:defaultSelectedKeys="['0-0-0']"
>
<a-icon slot="smile" type="smile-o" />
<a-icon slot="meh" type="smile-o" />
<template slot="custom" slot-scope="{selected}">
<a-icon :type="selected ? 'frown':'frown-o'" />
</template>
</a-tree>
</template>
<script>
const treeData = [{
title: 'parent 1',
key: '0-0',
slots: {
icon: 'smile',
},
children: [
{ title: 'leaf', key: '0-0-0', slots: { icon: 'meh' }},
{ title: 'leaf', key: '0-1-1', scopedSlots: { icon: 'custom' }}],
}]
export default {
data () {
return {
treeData,
}
},
methods: {
onSelect (selectedKeys, info) {
console.log('selected', selectedKeys, info)
},
onCheck (checkedKeys, info) {
console.log('onCheck', checkedKeys, info)
},
},
}
</script>