一文掌握elementUI构建复杂表格，合并行或列，多级表头等

在Element UI中，创建复杂的表格可以通过使用el-table组件来实现，包括合并行或列、多级表头等功能。以下是一个简单的例子，展示了如何使用Element UI来构建一个包含合并行和列，以及多级表头的复杂表格。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    border
  >
    <el-table-column
      label="用户信息"
      type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="姓名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <!-- 其他用户信息字段 -->
        </el-form>
      </template>
    </el-table-column>
    
    <el-table-column
      label="订单信息"
      align="center">
      <el-table-column
        label="订单编号"
        prop="orderNumber"
        width="180">
      </el-table-column>
      <!-- 其他订单信息列 -->
    </el-table-column>
 
    <el-table-column
      label="商品信息"
      align="center">
      <el-table-column
        label="商品名称"
        prop="productName"
        width="180">
      </el-table-column>
      <!-- 其他商品信息列 -->
    </el-table-column>
 
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象，包含用户信息、订单信息和商品信息
      ]
    };
  }
};
</script>
 
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

在这个例子中，我们定义了一个包含多级表头、合并行和列的复杂表格。el-table-column可以嵌套，用来创建多级表头结构。使用type="expand"可以创建一个可展开的列，用于显示更多详细信息。合并单元格可以通过rowspan或colspan属性来实现，也可以使用span-method属性来通过函数返回每个单元格的行或列跨度。