使用el-row和el-col混合table设计栅格化，实现表头自适应宽度，表格高度占位

演示效果：

 

如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建:

页面效果：

代码分析:

上面使用el-row和el-col搭建表单显示 第一排三个8,第二排8和16  

下面混合table实现，并使用border来自适应宽度，height="280"来控制表格高度，即使表格数据只有一条也可以占位，提升表格效果

<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>

原文地址：https://blog.csdn.net/SSHLY3/article/details/144280760

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！