vue使用Element表格之多级表头与表格合并（详细教程）_vue多级静态表格合并

做项目的时候,会经常用到表格，此次是需要用到多级表头和表格合并,特此记录,以备后来查看

1.初始效果（已加居中效果）

2.结构  （第一个是单独的el-table-column，第二个是一个el-table-column里包着一个el-table-column，第三个是一个el-table-column包着是三个el-table-column，其他的以此类推）

<template>
<div class="TableShows">
      <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod" :cell-style="rowStyle">
        <!-- 日期 -->
        <el-table-column prop="date" label="日期" width="110" align="center">
        </el-table-column>
        <!-- 商户号 -->
        <el-table-column width="120">
          <el-table-column prop="name" label="商户号账号" width="110"  align="center">
          </el-table-column>
        </el-table-column>
        <!-- 恒优惠 -->
        <el-table-column label="恒优惠商户号余额(前一天17.00获取虚拟账户余额）"  align="center">
          <el-table-column prop="province" label="上期期末余额" width="120"  align="center">
          </el-table-column>
          <el-table-column prop="city" label="进账金额" width="120"  align="center">
          </el-table-column>
          <el-table-column prop="address" label="转账金额" width="120"  align="center">
          </el-table-column>
        </el-table-column>
        <!-- 期末余额 -->
        <el-table-column width="120">
          <el-table-column prop="name" label="期末余额" width="110"  align="center">
          </el-table-column>
        </el-table-column>
        <!-- 省心系统 -->
        <el-table-column prop="name" label="省心系统期末余额(0点获取)" width="120"  align="center">
        </el-table-column>
        <!-- 省心流水 -->
        <el-table-column prop="name" label="省心当日流水订单" width="120"  align="center">
        </el-table-column>
        <!-- 手续费 -->
        <el-table-column width="110" label="手续费(根据订单量计算)"  align="center">
          <el-table-column prop="name" label="高德订单手续费(0.6%)" width="110"  align="center">
          </el-table-column>
          <el-table-column prop="name" label="腾讯订单手续费(0.72%)" width="110"  align="center">
          </el-table-column>
          <el-table-column prop="name" label="PP停车(0.22%)" width="110" align="center" >
          </el-table-column>
        </el-table-column>
        <!-- 总账 -->
        <el-table-column width="200">
          <el-table-column prop="name" label="总账金额 富民商户号期末金额+省心期末余额+省心当日流水订单" width="200"  align="center">
          </el-table-column>
        </el-table-column>
        <!-- 进账差异 -->
        <el-table-column width="150">
          <el-table-column prop="name" label="进账差异(进账金额+手续费+转账)" width="150"  align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
</template>

3.数据&&方法

过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

<script>
export default {
  name: "groupOfCustomers",
  data() {
    return {
     tableData: [//数据源
            {
            date: '3月8号',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            date: '3月8号',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            date: '',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            date: '3月9号',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            date: '3月10号',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }
          ]
    };
  },
  methods: {
         // 表格居中 
    rowStyle() {
      return "text-align:center";
    },
        // 表格合并,需要合并的地方是第7列到第12列的第1行,数组下标是从0开始,所以行是0开始算,列是从7列开始算
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
 
          if (columnIndex === 7 || columnIndex === 6 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12) {
            if (rowIndex === 0) {
              return [2, 1];
            } else if (rowIndex === 1) {
              return [0, 0];
            }
          }
        },
      }
}
</script>

4.效果