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.最后实现需求,整了一上午才弄好 真不容易!!!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggkbak
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13