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，簡單粗暴

以上就是我的處理的方法，各位掘友要是有好的方法歡迎來交流，要是有哪些寫得不對的歡迎指正！