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，简单粗暴

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