Element Table 表格组件实现多级、动态表头

今天一个同学提问：如何用 Element，实现多级、动态变化表头的表格？期望效果如下：

就是红色标记部分，会根据后端接口返回，动态变化。

直接上 demo，在线预览 点这里：

<template>
  <div id="app">
    <el-table :data="reports.items">
      <el-table-column label="供电单位" prop="branch" />
      <el-table-column
        v-for="(bank, index) in reports.banks"
        :key="bank"
        :label="bank"
      >
        <el-table-column :prop="`${index}_0`" label="金额"></el-table-column>
        <el-table-column :prop="`${index}_1`" label="笔数"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reports: {
        banks: ["建行", "招行"],
        items: [
          { branch: "甘肃", "0_0": 50, "0_1": 40, "1_0": 30, "1_1": 20 },
          { branch: "兰州", "0_0": 40, "0_1": 30, "1_0": 20, "1_1": 10 }
        ]
      }
    };
  }
};
</script>