grid布局写自定义表格效果

平时开发中，遇到要写报表，支持文本换行。类似下图：

 

这里用到vue3 + element plus ，用的【栅格布局 + flex布局】写法：

<template>
    <div class="app-container">
            <el-row>
            <el-col :span="3"><div class="grid-content title">项目名称</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.projectName }}</div>
            </el-col>
            <el-col :span="3"><div class="grid-content title">项目编号</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.projectCode }}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3"><div class="grid-content des title">项目概况</div> </el-col>
            <el-col :span="21"
                ><div class="grid-content des">{{ bidInfo?.projectSummary }}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3"><div class="grid-content des title">投标人资质要求</div> </el-col>
            <el-col :span="21"
                ><div class="grid-content des">{{ bidInfo?.requirements }}</div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="3"><div class="grid-content title">采购单位</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.purchaseUnit }}</div>
            </el-col>
            <el-col :span="3"><div class="grid-content title">采购单位层级</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">
                    {{ bidInfo?.purchaseUnit }}
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3"><div class="grid-content title">投标地点</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.address }}</div>
            </el-col>
            <el-col :span="3"><div class="grid-content title">项目预算（元）</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.projectBudget }}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3"><div class="grid-content title">公示时间</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.startTime }} —— {{ bidInfo?.endTime }}</div>
            </el-col>
            <el-col :span="3"><div class="grid-content title">开标时间</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.openingTime }}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3"><div class="grid-content title">联系人</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.contactPerson }}</div>
            </el-col>
            <el-col :span="3"><div class="grid-content title">代理招标单位</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.agentUnit }}</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3"><div class="grid-content title">联系电话</div> </el-col>
            <el-col :span="9"
                ><div class="grid-content">{{ bidInfo?.contactNum }}</div>
            </el-col>
            <el-col :span="3"><div class="grid-content title">详细信息</div> </el-col>
            <el-col :span="9">
                <div class="grid-content">
                    <el-link v-if="bidInfo?.beaconLink" :href="bidInfo?.beaconLink" target="_blank">{{ bidInfo?.beaconTitle }}</el-link>
                    <div v-else>无</div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>


const bidInfo = ref({ 
    "createBy": "1",
    "createTime": "2024-03-04 11:48:14",
    "updateBy": null,
    "updateTime": "2024-03-04 11:48:14",
    "remark": null,
    "id": "94071dd709e0ed8ed5d9b642c4c96904",
    "projectName": "测试项目",
    "projectCode": "BN990",
    "agentUnit": "这是单位",
    "openingTime": "2024-03-05",
    "purchaseUnit": "深圳市某单位",
    "unitLevel": "district_level",
    "address": "深圳市南山区",
    "startTime": "2024-03-01",
    "endTime": "2024-04-21",
    "isHoliday": "0",
    "contactPerson": "ces",
    "contactNum": "19879524088",
    "projectBudget": 99,
    "beaconTitle": "这是标题这是标题这是标题这是标题这是标题这是标题这是标题",
    "beaconLink": "http://www.baidu.com",
    "projectSummary": "在当今数字化时代，信息交流变得迅速而便捷。社交媒体、智能设备和互联网连接了我们的世界，让距离不再是问题。人们可以随时随地分享想法、观点和生活片段，拉近了彼此之间的距离。然而，随着信息量的急剧增加，我们也面临着信息超载和虚假信息的挑战。因此，在这个充满信息的时代，培养批判性思维和信息素养显得尤为重要。理性地对待信息来源，审慎地选择相信和传播的内容，是保持清晰头脑和健康心态的关键。信息时代赋予了我们前所未有的机会和便利，但也需要我们具备足够的警惕和智慧来驾驭这股信息浪潮。",
    "requirements": "在当今数字化时代，信息交流变得迅速而便捷。社交媒体、智能设备和互联网连接了我们的世界，让距离不再是问题。人们可以随时随地分享想法、观点和生活片段，拉近了彼此之间的距离。然而，随着信息量的急剧增加，我们也面临着信息超载和虚假信息的挑战。因此，在这个充满信息的时代，培养批判性思维和信息素养显得尤为重要。理性地对待信息来源，审慎地选择相信和传播的内容，是保持清晰头脑和健康心态的关键。信息时代赋予了我们前所未有的机会和便利，但也需要我们具备足够的警惕和智慧来驾驭这股信息浪潮。",
    "publishStatus": "0",
    "submitTime": null,
    "approvalStatus": "1",
    "auditTemplateId": "",
    "auditTemplate": null,
    "delFlag": "0"
});

</script>

<style lang="scss" scoped>
.app-container {
    width: 100%;
    min-height: 944px;
    overflow-y: auto;

    :deep(.el-row:last-child) {
        margin-bottom: 0;
    }
    :deep(.el-col) {
        border-radius: 4px;
        word-wrap: wrap;
        word-wrap: break-word;
        display: flex;  // 这里关键，实现超出文本换行
    }

    .grid-content {
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        padding: 15px;
        word-break: break-word;
        :deep(.el-link) {
            color: #409eff;
        }
    }

    .des {
        min-height: 150px;
        white-space: pre-wrap;
    }
    .title {
        font-weight: 600;
        font-size: 16px;
        background: rgba(234, 234, 234, 1);
    }
}
</style>