合并单元格的表头,横向合并行,纵向合并列(Element-ui的table表头的合并(行和列的合并))

列的合并

<el-table>
  <el-table-column label="总行" header-align="center" align="center">
  	<el-table-column label="第一行1" header-align="center" align="center">
  	</el-table-column>

  	<el-table-column label="第一行2" header-align="center" align="center">
  	</el-table-column>
  </el-table-column>
</el-table>

列的合并效果图
在这里插入图片描述
实际应用
在这里插入图片描述



行的合并

<el-table>
   <el-table-column label="总行" header-align="center" align="center">
  </el-table-column>
 
  <el-table-column label="第一行1" header-align="center" align="center">
    <el-table-column label="第二行1" header-align="center" align="center">
  </el-table-column>
  </el-table-column>

  <el-table-column label="第一行2" header-align="center" align="center">
    <el-table-column label="第二行2" header-align="center" align="center">
  </el-table-column>
  </el-table-column>

  <el-table-column label="第一行3" header-align="center" align="center">
    <el-table-column label="第二行3" header-align="center" align="center">
  </el-table-column>
  </el-table-column>

  <el-table-column label="第一行4" header-align="center" align="center">
    <el-table-column label="第二行4" header-align="center" align="center">
  </el-table-column>
  </el-table-column>
</el-table>

行的合并效果图
在这里插入图片描述

参考文档 = https://blog.csdn.net/allakk/article/details/89390019
官方文档 = https://element.eleme.cn/#/zh-CN/component/table

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页