antdv Tree 组件实现自定义图标以及自定义节点去除默认isLeaf图标

需求:

项目框架: antdv vue2

直接上代码:

<template>
    <div class="record-page">
        <div class="record-content">
            <!-- 左侧树结构 -->
            <div class="content-tree">
                <a-tree :tree-data="treeData" show-line show-icon default-expand-all >
                    <a-icon slot="switcherIcon" type="caret-down" />
                    <a-icon slot="home" type="bank" />
                    <a-icon slot="one" type="container" />
                    <a-icon slot="two" type="dashboard" />
                    <template slot="custom" slot-scope="item">
                        <span>{{item.title}}</span>
                        <div class="err-reord"><a-icon theme="filled" class="err-record-icon" type="exclamation-circle" />(2项异常)</div>
                    </template>
                </a-tree>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            hospitalList:[{id:1,name:"医院一"},{id:2,name:"医院二"},{id:3,name:"医院三"},{id:4,name:"医院四"},{id:5,name:"医院五"}],
            treeData:[
                {
                    title: '医院',
                    key: '0-0',
                    slots: {
                        icon: 'home',
                    },
                    children: [
                        { title: '检查', key: '0-0-0', slots: { icon: 'one' }, children:[
                            { title: '宫颈B超', key: '0-0-0-0', switcherIcon:true,  slots: { icon: 'two' },scopedSlots: { title: 'custom' } }
                        ] },
                        { title: '检验', key: '0-0-1', switcherIcon:true, scopedSlots: { icon: 'one' },children:[
                            { title: '尿常规', key: '0-0-1-0', switcherIcon:true,  slots: { icon: 'two' }, }
                        ] },
                    ],
                },
            ]
            
        }
    },
    methods: {
        treeSelect(){},
    }
}
</script>

<style lang="less" scoped >
    
    .record-page{
        .record-content{
             /deep/ .ant-tree li .ant-tree-node-content-wrapper{
                height: auto;
            }
            .content-tree{
                width: 380px;
                padding: 16px 16px 0px 16px;
                border-radius: 4px;
                border: 1px solid #D9D9D9;
                background: #FFF;
                .err-reord{
                    color: #FA6714;
                    font-size: 12px;
                    font-weight: 400;
                    .err-record-icon{
                        width: 24px;
                    }
                }
            }
        }
    }
    
</style>

效果图:

几个问题点:

1. 收起展开的图标更换使用 slot switcherIcon 即可 <a-icon slot="switcherIcon" type="caret-down" />
2. 自定义每个种类的图标, 我这里是动态数据, 所以使用的是treeData 来控制的. 在需要更换图标的对象中使用slots: { icon: 'one' } 然后在 template 内定义对应插槽的 icon 即可 <a-icon slot="one" type="container" />
3. 去除最后一项的默认图标,只需要在对应的对象中添加 switcherIcon:true即可去除.
4. 自定义组件的的样式, 像本需求有个异常的提示, 使用插槽自定义scopedSlots: { title: 'custom' }, 这时想换行增加一项,发现父节点的.ant-tree li .ant-tree-node-content-wrapper使用的是 display:inline-block;height:24px;;高度只有一行的高度,无法添加,所以将其高度置为 auto 就可以了./deep/ .ant-tree li .ant-tree-node-content-wrapper{height: auto;}