ant-design-vue/components/tree/demo/customized-icon.md

54 lines
1.1 KiB
Markdown
Raw Normal View History

2018-04-13 10:58:58 +00:00
<cn>
#### 自定义图标
可以针对不同的节点定制图标。
</cn>
<us>
#### Customize Icon
You can customize icons for different nodes.
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-04-13 10:58:58 +00:00
<template>
2019-09-28 12:45:07 +00:00
<a-tree :treeData="treeData" showIcon defaultExpandAll :defaultSelectedKeys="['0-0-0']">
2019-09-20 11:19:59 +00:00
<a-icon type="down" slot="switcherIcon" />
2018-04-13 10:58:58 +00:00
<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>
2019-09-28 12:45:07 +00:00
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-0-1', scopedSlots: { icon: 'custom' } },
],
},
];
2018-04-13 10:58:58 +00:00
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
treeData,
};
2018-04-13 10:58:58 +00:00
},
2019-09-28 12:45:07 +00:00
methods: {
onSelect(selectedKeys, info) {
console.log('selected', selectedKeys, info);
},
onCheck(checkedKeys, info) {
console.log('onCheck', checkedKeys, info);
},
2018-04-13 10:58:58 +00:00
},
2019-09-28 12:45:07 +00:00
};
2018-04-13 10:58:58 +00:00
</script>
```