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.总金额计算总和

1.  
   <el-table-column prop="quantity" :label="'数量'" align="center" width="100px">
2.  
   <template slot-scope="scope">
3.  
   <el-form-item label-width="0px" style="margin:22px 0px" :prop="'items.' scope.$index '.quantity'" :rules="invoiceRules.quantity">
4.  
   <el-input v-model.number="scope.row.quantity " oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
5.  
   </el-form-item>
6.  
   </template>
7.  
   </el-table-column>
8.  
   <el-table-column prop="price" :label="'单价（元）'" align="center" width="110px">
9.  
   <template slot-scope="scope">
10.  
    <el-form-item label-width="0px" style="margin:22px 0px" :prop="'items.' scope.$index '.price'" :rules="invoiceRules.price">
11.  
    <el-input v-model.number="scope.row.price" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
12.  
    </el-form-item>
13.  
    </template>
14.  
    </el-table-column>
15.  
    <el-table-column prop="priceSum" :label="'总金额'" align="center" width="120px">
16.  
    <template slot-scope="scope">
17.  
    {{ scope.row.priceSum = scope.row.price && scope.row.quantity ? scope.row.price * scope.row.quantity : 0 | priceSumFormat}}
18.  
    </template>
19.  
    </el-table-column>

3.设置getSummaries方法

1.  
   getSummaries(param) {
2.  
   const { columns, data } = param
3.  
   const sums = []
4.  
   columns.forEach((column, index) => {
5.  
   if (index === 0) {
6.  
   sums[index] = '总价'
7.  
   return
8.  
   }
9.  
   if (column.property === 'quantity') { // 判断当前prop绑定的ID
10.  
    const values = data.map(item => (item[column.property]))// 把对应一列中的之全部取出，放到一个数组中
11.  
    sums[index] = values.reduce((prev, curr) => {
12.  
    const value = Number(curr)// 将values中的每个值转换为number类型
13.  
    if (!isNaN(value)) {
14.  
    return prev curr
15.  
    } else {
16.  
    return prev
17.  
    }
18.  
    }, 0)
19.  
    sums[index] = '' // 对数量不进行计算显示
20.  
    } else if (column.property === 'price') {
21.  
    const values = data.map(item => (item[column.property]))// 把对应一列中的之全部取出，放到一个数组中
22.  
    sums[index] = values.reduce((prev, curr) => {
23.  
    const value = Number(curr)// 将values中的每个值转换为number类型
24.  
    if (!isNaN(value)) {
25.  
    return prev curr
26.  
    } else {
27.  
    return prev
28.  
    }
29.  
    }, 0)
30.  
    sums[index] = ''// 对单价不进行计算显示
31.  
    } else if (column.property === 'priceSum') {
32.  
    const values = data.map(item => (item[column.property]))// 把对应一列中的之全部取出，放到一个数组中
33.  
    sums[index] = values.reduce((prev, curr) => {
34.  
    const value = Number(curr)// 将values中的每个值转换为number类型
35.  
    if (!isNaN(value)) {
36.  
    return prev curr
37.  
    } else {
38.  
    return prev
39.  
    }
40.  
    }, 0)
41.  
    sums[index] = this.moneyFormat(sums[index])// !!重点 要对结果进行转换
42.  
    }
43.  
    })
44.  
    return sums
45.  
    },

4.千分位格式方法

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

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

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

1.  
   filters: {
2.  
   priceSumFormat(num) {
3.  
   num = String(num)
4.  
   const len = num.length
5.  
   return len <= 3 ? num : num.substr(0, len - 3) ',' num.substr(len - 3, 3)
6.  
   }
7.  
   },

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

这篇好文章是转载于：学新通技术网