antd design for vue的tree组件问题

antd design for vue的tree组件问题

首先是去掉组件自带的小箭头

可以通过css样式去掉

/deep/ .ant-tree li span.ant-tree-switcher{
    display: none;
}

然后是自定义图标

照着官网文档可以自定义，主要是根据状态来改变图标

这是文档中的根据是否selected来改变
注意 其中这个 { selected }，是这条数据的状态中的selected
根据需求不同可以用不同状态来判断
下面是我写的查看不同状态

<template slot="smile" slot-scope="record">
          <img slot="smile" :src="expanded ? selectedSrc : src" style="width:19px;height:19px" alt=""> {{record}}
</template>

其中selected和expanded是不一样的
selected是点击节点就会触发的
expanded是节点展开触发的
下面是我写的

<template slot="smile" slot-scope="{ expanded }">
          <img slot="smile" :src="expanded ? selectedSrc : src" style="width:19px;height:19px" alt="">
        </template>

效果图