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>
