You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.0 KiB
57 lines
1.0 KiB
<cn>
|
|
#### 自定义图标
|
|
可以针对不同的节点定制图标。
|
|
</cn>
|
|
|
|
<us>
|
|
#### Customize Icon
|
|
You can customize icons for different nodes.
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<a-tree
|
|
:data="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>
|
|
|
|
```
|