关于vue 使用 element UI 中Table 表格 数据统计后的小数点后的9999999999
对于引入element UI 是导入Table 表格的方法我就不详情说了,开始正文!使用Table 表格 数据统计后的小数点后的9999999999,如图比如 电话号码 在组件中,如果不做处理,他也是会对电话进行相加的,所以需要 对渲染的电话号码进行字符串的转换<el-table-columnlabel="员工电话" width="130px">...
·
对于引入element UI 是导入Table 表格的方法我就不详情说了,开始正文!
使用Table 表格 数据统计后的小数点后的9999999999,如图
比如 电话号码 在组件中,如果不做处理,他也是会对电话进行相加的,所以需要 对渲染的电话号码进行字符串的转换
<el-table-column label="员工电话" width="130px">
<template slot-scope="scope">
<span> {{String(scope.row.mobile)}}</span>
</template>
</el-table-column>
下面的是引用官方文档的表格进行了修改
<template>
<div>
<el-table
:data="tableData"
border
:summary-method="getSummaries"
show-summary
style="width: 100%; margin-top: 20px">
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column label="员工电话" width="130px">
<template slot-scope="scope">
<span> {{String(scope.row.mobile)}}</span> //对电话号码进行字符串的转换
</template>
</el-table-column>
<el-table-column prop="amount1" label="数值 1(元)"> </el-table-column>
<el-table-column prop="amount2" label="数值 2(元)"> </el-table-column>
<el-table-column prop="amount3" label="数值 3(元)"> </el-table-column>
</el-table>
</div>
</template>
下面就是js代码
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
mobile:13000000000
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
mobile:13000000000
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
mobile:13000000000
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
mobile:13000000000
amount1: '621',
amount2: '2.92',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
mobile:13000000000
amount1: '539',
amount2: '4.21',
amount3: 15
}]
};
},
methods: {
// 表格最后一行的总价
getSummaries(param) {
console.log(param)
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
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;
} else {
return prev;
}
}, 0);
sums[index]+=""
} else {
sums[index] = "";
}
});
if (sums.length===6) { //这个 6 是表格的列数
for (let u = 1; u < sums.length; u++) { //u=1是因为一开始sums[0]的值就为"合计"
if (sums[u]) { //判断sums[u]是否有值
sums[u] = Math.round(sums[u] * 100) / 100 //可以对精度进行控制,保留两位小数点
//如果是想保留三位小数 100改为1000即可
}
}
}
return sums;
}
}
这就完事了!
很简单 但是一开始却没那么简单 没想到块去,共同进步!!
更多推荐
已为社区贡献4条内容
所有评论(0)