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