el-table多级表头固定

背景

项目使用element-ui 开发，现在需要在固定el-table 表头。

已知在el-table-column 中使用属性fixed可以固定表头，但是在多级表头中失效。

如下图

解决方法

给一级表头设定宽度, 使一级表头的宽度 = 子表头总宽度

！！！一级表头的宽度必须是子宽度的总和，太小或者太大会出现不一样错误

代码如下：

<template>
  <el-table :data="tableData" style="width: 800px">
    <el-table-column label="配送信息" fixed width="480">
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
      </el-table-column>
    </el-table-column><el-table-column label="配送信息1">
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

效果图