antdvue 或 element表格合計

 

vue:

<a-table :columns="columns" :data-source="data">
  <template slot="footer" slot-scope="currentPageData">
   <a-row>
     <a-col :span="6" align="center" v-for="(item, index) in getSummaries(currentPageData)" :key="index" >{{ item }}</a-col >
   </a-row>
  </template>

 </a-table>

方法：

   getSummaries(param) {
    //ant里面適用
      const data = param
      const columns = this.columnsDetail

   //element里面適用
   // const { columns, data } = param;

      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合計'
        } else if (index === 1 || index === 2 || index === 3) {
    //ant里面適用
          const values = data.map(item => Number(item[column.dataIndex]))
    //element里面適用
    // const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              }
            }, 0)
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },

效果：