element table合計行自定義及單元格合並

  問題：項目需求要求table下面加合計一行

  圖片展示：

 

代碼示例：

 TEMPLATE：

  span-method是自定義table單元    

  show-summary是展示合並行

  summary-method是自定義合並行

<templete>
    <div>
         <el-table
      ref="table"
      v-loading="loading"
      class="table-wrap"
      :data="inventorys"
      :span-method="arraySpanMethod"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="id"
      lazy
      fit
      stripe
      show-summary
      :summary-method="getSummaries"
      border
    >
      <el-table-column label="序號" align="center">
        <template slot-scope="{ row, $index }">
          {{ ($index + 1) * currentPage }}
        </template>
      </el-table-column>
      <el-table-column prop="productCode" label="產品編號" align="center">
        <template slot-scope="{ row }">
          {{ row.productCode }}
        </template>
      </el-table-column>
      <el-table-column prop="availQuantity" label="可售數量" sortable align="center">
        <template slot-scope="{ row }">
          {{ row.availQuantity }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="在庫數量" align="center">
        <template slot-scope="{ row }">
          {{ row.quantity }}
        </template>
      </el-table-column>
    </el-table>
    </div>
</templete>

 

  SCRIPT：

 

 arraySpanMethod() {
    //table合計行合並單元格
    setTimeout(() => {
      if (this.$refs.table.$el) {
        let current = this.$refs.table.$el
          .querySelector('.el-table__footer-wrapper')
          .querySelector('.el-table__footer')
        let cell = current.rows[0].cells
        //cell[1].style.display = 'none'
        cell[1].colSpan = '9'
      }
    }, 50)
  },
getSummaries(param) {
   //table自定義合計行方法summary-method
   const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = '合計可售總數量';
        return
      }
      if(index===9){
        const values = data.map(item => Number(item[column.property]))
        sums[1] = values.reduce((prev, curr) => {
          return prev + curr
        }, 0)
        sums[1]=sums[1].toFixed(2)
      }

    })
    return sums
}
  

 

 

--------END