VUE+Element Table表格表头合并处理方法

前言

这几天做一个项目需要用到表格来展示数据，由于项目用到了Element这个框架，所以就直接用Table组件来写。在做的过程中遇到了一些问题，虽然都解决了，不妨记录下来，希望遇到这些问题的童鞋有个参考

1.

如上图所示，这个表格需要用到多级表头的形式来展示数据，Element Table组件已经提供这种类型的，可以直接拿来用，只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头

官网的代码：

  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <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="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>

然后我们实现了多级表头，但是有一个问题，我们的表头数据不是固定，是根据年份来动态展示的，所以只能根据接口返回的数据来处理。为了能够方便的展示数据，接口返回的数据格式也是跟后端那边约定好的，数据格式如下：

tableHeadData: ['2018年1~6月','2017年1~6月','2016年'],
tableData: [{
          businessType: '定制产品化软件1',
          data: [
            {
              date: '2018年1~6月',
              income: 128,
              proportion: '12%',
              increase: 25,
              increaseRate: '24%'
            },{
              date: '2017年1~6月',
              income: 100,
              proportion: '10%',
              increase: 20,
              increaseRate: '34%'
            },{
              date: '2016年',
              income: 1000,
              proportion: '10%',
              increase: 20,
              increaseRate: '34%'
            }
          ]
        }, {
          businessType: '定制工程化软件2',
          data: [
            {
              date: '2018年1~6月',
              income: 100,
              proportion: '10%',
              increase: 20,
              increaseRate: '14%'
            },{
              date: '2017年1~6月',
              income: 200,
              proportion: '20%',
              increase: 20,
              increaseRate: '24%'
            },{
              date: '2016年',
              income: 10000,
              proportion: '10%',
              increase: 20,
              increaseRate: '34%'
            }
          ]
        }, {
          businessType: '合计',
          data: [
            {
              date: '2018年1~6月',
              income: 328,
              proportion: '22%',
              increase: 45,
              increaseRate: '38%'
            },{
              date: '2017年1~6月',
              income: 300,
              proportion: '30%',
              increase: 40,
              increaseRate: '58%'
            },{
              date: '2016年',
              income: 11000,
              proportion: '10%',
              increase: 20,
              increaseRate: '34%'
            }
          ]
        }]

最后通过v-for就可以实现数据动态获取了

2.

这个表格的表头跟第一个的表头就不一样了，年份不是最高一级的，而是跟“客户”和“上期金额”同级。接口返回的数据格式跟第一个表格数据格式一样，如果用v-for来循环渲染数据的话，就没办法渲染了，本来是想在最外面加一层el-table-column的，然而表头变了，多了一行空白的。

后面想了一下，直接用th标签替换el-table-column，简单粗暴

以上就是个人处理的方法，各位掘友要是有好的方法欢迎来交流，要是有哪些写得不对的欢迎指正！