ant-design-vue中的a-directory-tree更换图标

<template>
  <div>
    <a-directory-tree multiple default-expand-all @select="onSelect"
                      :icon='getIcon'
    >
      <a-tree-node key="0-0" title="parent 0">
        <a-tree-node key="0-0-0" title="leaf 0-0" is-leaf/>
        <a-tree-node key="0-0-1" title="leaf 0-1" is-leaf/>
      </a-tree-node>
    </a-directory-tree>
  </div>
</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,
        dirIcon: '<a-icon slot="smile" type="smile-o" />'
      }
    },
    methods: {
      onSelect (selectedKeys, info) {
        console.log('selected', selectedKeys, info)
      },
      onCheck (checkedKeys, info) {
        console.log('onCheck', checkedKeys, info)
      },
      getIcon(props) {
        const { isLeaf, expanded } = props;
        if (isLeaf) {
          return <a-icon type="home" />;
        }
        return <a-icon type={expanded ? "folder-open" : "folder"} />;
      }
    },
  }
</script>

主要是getIcon这个方法，拉进行目录和文件的区分，然后返回一个slot给组件即可

标签：info,vue,return,title,treeData,tree,ant,key,icon
来源： https://www.cnblogs.com/mmykdbc/p/14030342.html