表格数据行内编辑,数据千分位展示和关于数据内对象值的改变
最近做了表格行内编辑这一块给财务录入数据用,财务的人也挺烦的,展示数据还要千分位展示,然而提交给后台的只里面还不能有逗号,然 我脑子就有点爆炸了!!!
首先是千分位的展示转变
我发现在element表格上展示和js内转换展示还不能用同一种的简便转换:
- 在表格内,我用的是很简单的toLocaleString(‘en-US’);
<el-table-column prop="sysj" label="上月实际">
<template slot-scope="{row, $index}">
<span>{{ row.sysj.toLocaleString('en-US') }}</span>
</template>
</el-table-column>
2.js中的that.tableData1[i].sysj.toLocaleString(‘en-US’)你会发现根本没有效果,这就很丽人头大,不得已又想了另一种方法,js直接替换;
var separator = (num) => {
if (!num) {
return '0.00';
};
let str = parseFloat(num).toFixed(2);
return str && str
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
return $1 + ",";
});
}
hj = separator((Number(that.tableData1[i].one) + Number(that.tableData1[i].two) + Number(that.tableData1[i].three) + Number(that.tableData1[i].four)).toFixed(3))
- 在行内编辑的时候,由于合计是前端计算展示的,所以有些人就会问,怎么实时根据表格内的一个值改变来改变计算值,其实也很简单;
tableData1: {
handler(newVal, oldVal) {
//这里面填写计算步骤并赋值
},
deep: true
},
- 其实到这边按理说应该算是正常结束了,but我在把数据提交给后端的时候发现了,表格数据内我计算的值竟然是还是字符串且内部还有千分位的逗号,这直接导致了数据提交失败,在之前的数据计算太多又不太想在前面的代码动手脚,那就只能给提交数据值做改变,也是本次所说的改变表格数组对象内的值;
- 在这边我想到了foreach循环表格数组,在内部在使用for in来改变对象内的值的改变,于是我发现,并没什么暖用(没用的代码);
that.tableData1.forEach((item, index) => {
for (var key in item) {
if (typeof item[key] == 'string' && item[key].indexOf(",") != -1) {
item[key]= item[key].replace(/,/g, '')
//这边你打印里面你会发现值确实改变了
} else {
item[key]= item[key]
}
//在外边你再打印 发现值并没有变
}
});
//最后的结果当然是没改变的,这时候你就要想个新的思路了
- 我想了一下,要不就重新创一个新的数组并重新赋值;
let cdd1 = that.tableData1.map((item, index) => {
var obj = {}
for (var key in item) {
var li = key
if (typeof item[key] == 'string' && item[key].indexOf(",") != -1) {
obj[li] = item[key].replace(/,/g, '')
} else {
obj[li] = item[key]
}
}
return obj
});
//这个时候你打印出来的cdd1里面的值就是你想要改变的地方
这边结尾解释一波,其实这篇文章并没有太多的技术难题,只是想说有的时候你换一个思路可能你会有意外的惊喜,如果还有不理解的请留言~~~。