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>
效果图