element-ui table最后一列计算总金额和使用show-summary :和summary-method=“getSummaries“方法进行计算和对结果进行千分位显示

实现需求：对一行进行计算和总价计算并千分位显示

1.设置show-summary :和summary-method="getSummaries"方法

 <el-table :data="form.items" show-summary :summary-method="getSummaries" border :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">

 2.总金额计算总和

<el-table-column prop="quantity" :label="'数量'" align="center" width="100px">
     <template slot-scope="scope">
       <el-form-item label-width="0px" style="margin:22px 0px" :prop="'items.' + scope.$index + '.quantity'" :rules="invoiceRules.quantity">
         <el-input v-model.number="scope.row.quantity " oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
       </el-form-item>
     </template>
</el-table-column>
<el-table-column prop="price" :label="'单价（元）'" align="center" width="110px">
      <template slot-scope="scope">
        <el-form-item label-width="0px" style="margin:22px 0px" :prop="'items.' + scope.$index + '.price'" :rules="invoiceRules.price">
         <el-input v-model.number="scope.row.price" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
        </el-form-item>
      </template>
</el-table-column>
<el-table-column prop="priceSum" :label="'总金额'" align="center" width="120px">
       <template slot-scope="scope">
         {{ scope.row.priceSum = scope.row.price && scope.row.quantity ? scope.row.price * scope.row.quantity : 0 | priceSumFormat}}
        </template>
</el-table-column>

3.设置getSummaries方法

getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        if (column.property === 'quantity') { // 判断当前prop绑定的ID
          const values = data.map(item => (item[column.property]))// 把对应一列中的之全部取出，放到一个数组中
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)// 将values中的每个值转换为number类型
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = '' // 对数量不进行计算显示
        } else if (column.property === 'price') {
          const values = data.map(item => (item[column.property]))// 把对应一列中的之全部取出，放到一个数组中
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)// 将values中的每个值转换为number类型
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = ''// 对单价不进行计算显示
        } else if (column.property === 'priceSum') {
          const values = data.map(item => (item[column.property]))// 把对应一列中的之全部取出，放到一个数组中
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)// 将values中的每个值转换为number类型
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = this.moneyFormat(sums[index])// !!重点 要对结果进行转换
        }
      })
      return sums
    },

4.千分位格式方法

moneyFormat(num) {
      num = String(num)
      const len = num.length
      return len <= 3 ? num : num.substr(0, len - 3) + ',' + num.substr(len - 3, 3)
    },

5.总价千分位实现了，table单行还没有进行千分位转换 要在scope里写设置方法 priceSumFormat

{{ scope.row.priceSum = scope.row.price && scope.row.quantity ? scope.row.price * scope.row.quantity : 0 | priceSumFormat}}

filters: {
    priceSumFormat(num) {
      num = String(num)
      const len = num.length
      return len <= 3 ? num : num.substr(0, len - 3) + ',' + num.substr(len - 3, 3)
    }
  },

6.最后实现需求，整了一上午才弄好 真不容易！！！