vue elementUI table 自定義表頭和行合併

最近項目中作表格比較多，對element表格的使用，只須要傳遞進去數據，而後寫死表頭便可渲染。

但現實中應用中，若是寫死表頭，而且每一個組件中寫本身的表格，不只浪費時間並且消耗性能。這個時候須要動態渲染表頭。

而官方例子都是寫死表頭，那麼爲了知足項目需求，只能本身來研究一下。

一、自定義表頭

代碼以下，其實就是分了兩部分，表格主數據是在TableData對象中，表頭的數據保存在headerDatas，headerDatas.label其實就是表頭的值，若是表頭是「序號」，那麼headerDatas.label="序號"，在TableData中構建TableData[序號]= 1 這樣的map對象，就能夠動態渲染出想要的表格

---

<el-table
          :data="TableData"
          :height="tableHeight"
          :row-class-name="showEmergencyLine"
          border
          element-loading-spinner="el-icon-loading"
          element-loading-text="拼命加載中"
          @selection-change="handleSelectionChange"
          v-loading.lock="TableLoading"
          @header-dragend="changeHeaderWidth"
        >
         <el-table-column
            v-for="header in headerDatas"
            :prop="header.type"
            :key="header.label"
            :label="header.label"
            :width="header.width"
            :minWidth="header.minWidth"
            :itemname="header.mid"
            :align="header.align"
            header-align="center"
          >
          <template slot-scope="scope">
          <div
            v-else
          >{{scope.row[scope.column.property]}}</div>
          </template>
          </el-table-column>
</el-table>

---

二、行合併

在項目中，有些表格經常會有像下面這樣的需求，一行合併後面幾行，那麼這個怎麼處理呢

官方文檔中有這個方法

經過給table傳入span-method方法能夠實現合併行或列，方法的參數是一個對象，裏面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數能夠返回一個包含兩個元素的數組，第一個元素表明rowspan，第二個元素表明colspan。 也能夠返回一個鍵名爲rowspan和colspan的對象。

<el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      highlight-current-row
      element-loading-spinner="el-icon-loading"
      element-loading-text="拼命加載中"
      v-loading.lock="mainTableLoading"
      border
      style="width: 100%; margin-top: 25px"
    >
</el-table>

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {//偶數行
          if (columnIndex === 0) {//第一列
            return [1, 2];//1合併一行，2佔兩行
          } else if (columnIndex === 1) {//第二列
            return [0, 0];//0合併0行，0佔0行
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,//合併的行數
              colspan: 1//合併的列數，設爲０則直接不顯示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

這裏面能夠經過對rowIndex，columnIndex根據本身的要求做一些條件判斷，而後返回rowspan，colspan就能夠合併了。