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

1.1 KiB

#### 自定义图标 可以针对不同的节点定制图标。 #### Customize Icon You can customize icons for different nodes.
<template>
  <a-tree
    :treeData="treeData"
    showIcon
    defaultExpandAll
    :defaultSelectedKeys="['0-0-0']"
  >
    <a-icon type="down" slot="switcherIcon" />
    <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-0-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>