演示效果：

?

如上圖,由于地址信息很長,需要占多個(gè)格子,所以需要錯(cuò)開,若想實(shí)現(xiàn)這種混合效果,可以這樣搭建:

頁面效果：

代碼分析:

上面使用el-row和el-col搭建表單顯示 第一排三個(gè)8,第二排8和16??

下面混合table實(shí)現(xiàn)，并使用border來自適應(yīng)寬度，height="280"來控制表格高度，即使表格數(shù)據(jù)只有一條也可以占位，提升表格效果

<template><el-dialog title="xxx資料" :visible.sync="open" :close-on-click-modal="false" @close="cancel" width="840px"append-to-body><el-form ref="form" :model="dataForm" label-width="90px"><el-row><el-col :span="8"><el-form-item label="名稱">{{ dataForm.xxx}}</el-form-item></el-col><el-col :span="8"><el-form-item label="電話">{{ dataForm.xxx}}</el-form-item></el-col><el-col :span="8"><el-form-item label="性別">{{ dataForm.sex }}</el-form-item></el-col></el-row><el-row><el-col :span="8"><el-form-item label="年齡">{{ dataForm.age }}</el-form-item></el-col><el-col :span="16"><el-form-item label="xxx">{{ dataForm.xxx}}</el-form-item></el-col></el-row></el-form><el-table :data="xxxArr" border height="280"><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/></el-table><div slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button></div></el-dialog>
</template>