elementui的tree组件

去掉小三角、添加图片、加上连接虚线

<template>
    <view class="jg-box">
        <div class="jiegou-box">
                <el-tree class="tree-line" :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true">
                    <span class="custom-tree-node" slot-scope="{ node,data }">
                        <span :data="data.name" style="display: flex;align-items: center;">
                            <image :src="data.icon" style="width: 24px; height: 20px;margin-right: 6px;" v-if="data.id == 100"></image>
                            <image :src="data.icon" style="width: 18px; height: 20px;margin-right: 6px;" v-else></image>
                            <!-- <i :class="data.icon" style="background-color: #4d4d4d;color: #fff;"></i> -->{{data.name}}
                        </span>
                    </span>
                </el-tree>
        </div>
    </view>
</template>
<script>
    export default {
        name: 'tree',
        data() {
            return {
                data: [{
                    name: '一级 1',
                    icon: 'el-icon-folder-opened',//这时icon是图标，之后在我获取后台的数据后更改了换成了图片路径
                    children: [{
                            name: '二级 1-1',
                            icon: 'el-icon-document',
                        },
                        {
                            name: '二级 1-2',
                            icon: 'el-icon-document',
                        },
                        {
                            name: '二级 1-3',
                            icon: 'el-icon-document',
                        },
                        {
                            name: '二级 1-4',
                            icon: 'el-icon-document',
                        },
                    ]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        methods: {
            handleNodeClick(data) {//点击节点获取该节点的数据
                let id = data.id
                console.log(data)
            }
        },
        mounted() {
            let that = this;
            uni.request({
                url: address.getDeptPicture,
                method: "POST",
                success(res) {
                    let data1 = ""
                    data1 = res.data.data;
                    data1.forEach((value, index) => {//遍历后台的数据给数据加上'icon'图片路径（因为后台的数据中没有这个字段，所以我需要加上icon）
                        value['icon'] = '../../static/dk-Folder.png'//将小三角换成图片
                        //console.log(value.children)
                        value.children.forEach((value1, index) => {
                            value1['icon'] = '../../static/dk-File.png'
                        })
                    })
                    that.data = data1
                    console.log(data1)
                },
            })
        }
    }
</script>
<style lang="scss" scoped>
    .jiegou-box {
        display: flex;
        justify-content: space-between;
        width: 91.14%;
        height: 870px;
        background: rgba(255, 255, 255, 0.6);
        margin-left: 4.43%;
        .tree-left {
            margin-top: 30px;
            margin-left: 30px;
        }
    }
    .edit-fields:nth-child(2) {
        font-size: 18px !important;
        color: red;
    }
    /*去掉elementui tree前面的小三角*/
    /deep/.el-tree .el-tree-node__expand-icon.expanded // 取消旋转
        {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    /deep/ .el-tree .el-icon-caret-right:before {
        content: "";
        font-size: 18px;
        margin-left: 4px;
    }
    /deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        content: "";
        font-size: 18px;
        margin-right: 4px;
    }
 /*改变每个节点的行高*/
    /deep/.el-tree-node__content {
        min-height: 35px;
    }
    /deep/ .el-tree {
        background: none;
    }
    /*加上虚线链接*/
    .tree-line {
        font-size: 18px;
        /deep/ .el-tree-node {
            position: relative;
            color: #4D4D4D;
        }
        /deep/ .el-tree-node__children {
            padding-left: 16px; // 缩进量
            font-size: 16px !important;
        }
        // 竖线
        /deep/ .el-tree-node::before {
            content: "";
            height: 100%;
            width: 1px;
            position: absolute;
            left: -3px;
            top: -26px;
            border-width: 1px;
            border-left: 1px dashed #52627C;
        }
        // 当前层最后一个节点的竖线高度固定
        /deep/ .el-tree-node:last-child::before {
            height: 38px; // 可以自己调节到合适数值
        }
        // 横线
        /deep/ .el-tree-node::after {
            content: "";
            width: 30px;
            height: 20px;
            position: absolute;
            left: -3px;
            top: 18px;
            border-width: 1px;
            border-top: 1px dashed #52627C;
        }
        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
        /deep/ &>.el-tree-node::after {
            border-top: none;
        }
        /deep/ &>.el-tree-node::before {
            border-left: none;
        }
        // 展开关闭的icon
        /deep/ .el-tree-node__expand-icon {
            font-size: 16px;
            // 叶子节点（无子节点）
            /deep/ &.is-leaf {
                color: transparent;
                // display: none; // 也可以去掉
            }
        }
    }
</style>