這樣的樹狀結構圖我是這樣寫的

「這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰」

碰見這樣的組織架構圖

個人製做的思路

我是將視圖分紅左右兩部分
右邊只負責列表內容；
左側相對而言要複雜一些
左側主要是有 【垂直的線】 以及【最上面的橫線】和【中間的線】【最下面的線的橫線】
如何處理垂直的線了[linedotted]
我是這樣操做的
進行定位，主要的是控制高度我是使用height: calc(100% - 60px);
來控制線的高度的
.linedotted {
    position: absolute;
    height: calc(100% - 60px);
    left: 212px;
    width: 1px;
    top: 22px;
    border: 1px dashed #dddddd;
}
父級元素使用相對定位哈 【須要注意的】


中間的橫線[row-lin] 
因爲仍然在文檔流中。
因此我沒有使用定位,正常顯示便可。
.row-line {
    width: 40px;
    height: 1px;
    border: 1px dashed #dddddd;
    // 往上偏移居中
    margin-top: -16px;
}


最上面的橫線[right-top-line]
我是使用的定位來處理的
.right-top-line {
    position: absolute;
    left: 212px;
    top: 18px;
    width: 41px;
    height: 1px;
    border: 1px dashed #dddddd;
}


最下面的橫線，[right-bottom-lin]
.right-bottom-line {
    position: absolute;
    left: 212px;
    bottom: 34px;
    width: 41px;
    height: 1px;
    border: 1px dashed #dddddd;
}


我在製做的過程當中碰見的問題
主要是垂直的那一根線的高度很差控制
後來通過思考
我是用的是 calc來動態控制

最上面的拿一根線和最下面的拿一根線
使用定位就能夠解決位置了

這樣的流程展現我仍是不多碰見的，
感受仍是頗有意思的
因此想記錄一下
可能下一次還回碰見的哈
複製代碼

代碼以下

<template>
    <div class="com-scholl">
        <div
            class="item-flex-flex"
            v-for="(item, index) in ListArr.arr"
            :key="index"
        >
            <div class="left-part">
                <div class="mudule">{{ item.name }}</div>
                <div class="row-line" v-show="item.listMenu"></div>
                <div class="linedotted" v-show="item.listMenu"></div>
                <div class="right-top-line" v-show="item.listMenu"></div>
                <div class="right-bottom-line" v-show="item.listMenu"></div>
            </div>
            <div class="right-part">
                <div
                    class="right-cont"
                    v-for="(itemName, myindex) in item.listMenu"
                    :key="myindex"
                >
                    <p class="dec-name">{{ itemName.itemName }}</p>
                    <ys-icon
                        iconClass="icon--arrow-down-copy"
                        class="right-arrow"
                    ></ys-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    setup() {
        let ListArr = reactive({
            arr: [
                {
                    name: '學校字典管理',
                    listMenu: [
                        { itemName: '學段管理' },
                        { itemName: '科目管理' },
                        { itemName: '招生設置' },
                        { itemName: '生源設置' },
                        { itemName: '就讀類型' },
                    ],
                },

                {
                    name: '學校字典管理',
                    listMenu: [
                        { itemName: '學段管理' },
                        { itemName: '科目管理' },
                    ],
                },

                {
                    name: '校歷設置',
                },
                {
                    name: '做息時間',
                },
                {
                    name: '學屆（年級）管理',
                },
                {
                    name: '班級管理',
                },
            ],
        })
        return { ListArr }
    },
})
</script>
<style lang="scss" scoped>
.com-scholl {
    padding-left: 159px;
    padding-top: 25px;
    padding-bottom: 40px;
}

.item-flex-flex {
    display: flex;
    position: relative;
    margin-bottom: 32px; //48-16=32
    .left-part {
        margin-right: 43px;
        align-items: center;
        display: flex;
        .mudule {
            width: 172px;
            height: 40px;
            background: #f5f7fa;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.45);
            align-items: center;
            display: flex;
            justify-content: center;
            // 往上偏移居中
            margin-top: -16px;
        }
        // 左側的橫線
        .row-line {
            width: 40px;
            height: 1px;
            border: 1px dashed #dddddd;
            // 往上偏移居中
            margin-top: -16px;
        }
        .linedotted {
            position: absolute;
            height: calc(100% - 60px);
            left: 212px;
            width: 1px;
            top: 22px;
            border: 1px dashed #dddddd;
        }
        .right-top-line {
            position: absolute;
            left: 212px;
            top: 18px;
            width: 41px;
            height: 1px;
            border: 1px dashed #dddddd;
        }
        .right-bottom-line {
            position: absolute;
            left: 212px;
            bottom: 34px;
            width: 41px;
            height: 1px;
            border: 1px dashed #dddddd;
        }
    }
    // 172+40=212

    .right-cont {
        width: 540px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding-right: 16px;
        padding-left: 24px;
        box-sizing: border-box;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .dec-name {
            width: 68px;
            height: 19px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.65);
        }
        .right-arrow {
            transform: rotate(-90deg);
            font-size: 16px;
            color: rgba(0, 0, 0, 0.25);
        }
    }
}
</style>
複製代碼