el-tree自定义树前小三角形两种方法

1、更改content:

  ::v-deep .el-icon-caret-right:before {
        content: "\e723";
        font-size: 16px;
    }

    ::v-deep .expanded:before {
        content: "\e722";
        font-size: 16px;
    }
    ::v-deep .el-tree-node__expand-icon.expanded {
        transform: none;
    }

效果图：

2、直接自定义图标：

<template>
    <div class="ov-container">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
             <span class="custom-tree-node" slot-scope="{node,data}">
                        <i v-if="node.level == 1" class="provice"/>
                        <i v-else-if="node.level == 2" class="city"/>
                        <i v-else-if="node.level == 3"/>

                 {{data.label}}
                 </span>
        </el-tree>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
                data: [
                    {
                        label: '一级 1',
                        children: [{
                            label: '二级 1-1',
                            children: [{
                                label: '三级 1-1-1'
                            }]
                        }]
                    }, {
                        label: '一级 2',
                        children: [{
                            label: '二级 2-1',
                            children: [{
                                label: '三级 2-1-1'
                            }]
                        }, {
                            label: '二级 2-2',
                            children: [{
                                label: '三级 2-2-1'
                            }]
                        }]
                    }, {
                        label: '一级 3',
                        children: [{
                            label: '二级 3-1',
                            children: [{
                                label: '三级 3-1-1'
                            }]
                        }, {
                            label: '二级 3-2',
                            children: [{
                                label: '三级 3-2-1'
                            }]
                        }]
                    },{
                        label: '一级 4',
                        children: [{
                            label: '三级 3-2-1'
                        }]
                    },{
                        label: '一级 4'
                    }],
            }
        }
    }
</script>

<style scoped lang="scss">
    .ov-container {
        height: calc(100vh - 80px);
        background: #ffffff;
        border-radius: 5px;
        margin: 10px;
    }

    .provice {
        background: url("../../../assets/images/z-tree_folder.png");
        width: 17px;
        height: 14px;
        display: inline-block;
    }

    .city {
        background: url("../../../assets/images/z-tree_layers.png") no-repeat;
        width: 17px;
        height: 14px;
        display: inline-block;
    }

    .line {
        background: url("../../../assets/images/z-tree_lightning.png");
        width: 17px;
        height: 14px;
        display: inline-block;
    }

    .data {
        background: url("../../../assets/images/z-tree_sj.png");
        width: 17px;
        height: 14px;
        display: inline-block;
    }

    .el-tree /deep/ .el-tree-node__expand-icon.expanded
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    //有子节点 且未展开
    .el-tree /deep/ .el-icon-caret-right:before
    {
        background: url("../../../assets/images/z-tree_shut-down.png") no-repeat 0 0;
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        font-size: 16px;
        background-size: 100% 100%;
    }
    //有子节点 且已展开
    .el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
    {
        background: url("../../../assets/images/z-tree_open.png") no-repeat 0 0;
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        font-size: 12px;
        background-size: 100% 100%;
    }
    //没有子节点
    .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before
    {
        background: url("../../../assets/images/z-tree_sj.png") no-repeat 0 0;
        content: ' ';
        display: block;
        width: 12px;
        height: 12px;
        font-size: 16px;
        background-size: 100% 100%;
    }
</style>

效果图：