el-table多级表头 固定多列

项目场景：

项目要求表格实现多级标题，并且表格滚动条向右滚动时，前四列锁定，效果如图：

问题描述

elementUI给的例子中只有一级标题

---

解决方案：

1：给一级标题添加fixed，实现固定
2、给一级标题添加宽度width，一级标题宽度等于二级标题宽度之和

<el-table-column :label="$t('lang.dataValue')" fixed width="400">
	<el-table-column v-for="(item,index) of columns" :prop="item.key" :label="item.title" 
           :min-width="item.width" :key="index" >
	</el-table-column>
</el-table-column>

columns: [
          {
            title: this.$t('lang.number'),
            key: 'code',
            align: 'center',
            width: 100,
          },{
            title: this.$t('lang.name'),
            key: 'name',
            align: 'center',
            width: 100,
          },          
          {
            title: this.$t('lang.dividedCategory'),
            key: 'category',
            align: 'center',
            width: 150,
          },
          {
            title: this.$t('tab_col.unit'),
            key: 'unit',
            align: 'center',
            width: 50,
          }
],

本想着这样就完美解决了，但是，一切换数据，发现新问题了，数据错位了，如图：

原因：重新请求数据，导致el-table渲染异常

解决办法：在请求数据赋值处，使用官方文档提供的doLayout()方法对表格重新布局

• 表格设置ref
  
• 调用el-table重绘方法
  
  到此，完美解决el-table多级表头，固定多列！