element ui table组件的另类写法，支持固定多行表头

某个项目的特殊需求，首3行均是表头，且为冻结状态(即固定)，左边第1列也是固定状态

废话少说，直接上vue源码

<template>
  <div class="el-table-wrap">
    <el-table :data="tableData" style="width: 100%" height="400" border>
      <el-table-column fixed width="150"  align="center">
        <template slot="header">
          <div class="table-header-item">责任区</div>
          <div class="table-header-item">表头2</div>
          <div class="table-header-item">表头3</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120"  align="center">
        <template slot="header">
          <div class="table-header-item">东区</div>
          <div class="table-header-item">表头2</div>
          <div class="table-header-item">表头3</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120"  align="center">
        <template slot="header">
          <div class="table-header-item">南区</div>
          <div class="table-header-item">表头2</div>
          <div class="table-header-item">表头3</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.province }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120"  align="center">
        <template slot="header">
          <div class="table-header-item">西区</div>
          <div class="table-header-item">表头2</div>
          <div class="table-header-item">表头3</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120"  align="center">
        <template slot="header">
          <div class="table-header-item">北区</div>
          <div class="table-header-item">表头2</div>
          <div class="table-header-item">表头3</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120"  align="center">
        <template slot="header">
          <div class="table-header-item">表头1</div>
          <div class="table-header-item">表头2</div>
          <div class="table-header-item">表头3</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.zip }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ]
    };
  }
};
</script>
<style >
.el-table-wrap {
  width: 600px;
  margin: 100px auto 0;
}
.table-header-item {
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
}
.el-table--border th:first-child .cell,
.el-table--border th .cell {
  padding-left: 0;
}
.el-table th>.cell {
  padding-right: 0;
}
.el-table th>.cell .table-header-item:nth-child(1),
.el-table th>.cell .table-header-item:nth-child(2) {
  border-bottom: 1px solid #dfe6ec;
}
.el-table th>.cell .table-header-item:nth-child(2) {
  height: 50px;
  line-height: 50px;
}
.el-table th>.cell .table-header-item:nth-child(1) {
  line-height: 30px;
}
.el-table th>.cell .table-header-item:nth-child(3) {
  line-height: 50px;
}
</style>