行内编辑 数据千分位展示 数组内对象值改变

表格数据行内编辑，数据千分位展示和关于数据内对象值的改变

最近做了表格行内编辑这一块给财务录入数据用，财务的人也挺烦的，展示数据还要千分位展示，然而提交给后台的只里面还不能有逗号，然 我脑子就有点爆炸了！！！

首先是千分位的展示转变

我发现在element表格上展示和js内转换展示还不能用同一种的简便转换：

1. 在表格内，我用的是很简单的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))

3. 在行内编辑的时候，由于合计是前端计算展示的，所以有些人就会问，怎么实时根据表格内的一个值改变来改变计算值，其实也很简单；

tableData1: {
handler(newVal, oldVal) {
  //这里面填写计算步骤并赋值
  },
  deep: true
},

4. 其实到这边按理说应该算是正常结束了，but我在把数据提交给后端的时候发现了，表格数据内我计算的值竟然是还是字符串且内部还有千分位的逗号，这直接导致了数据提交失败，在之前的数据计算太多又不太想在前面的代码动手脚，那就只能给提交数据值做改变，也是本次所说的改变表格数组对象内的值；
5. 在这边我想到了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]
       }
      //在外边你再打印  发现值并没有变
   }
});
//最后的结果当然是没改变的，这时候你就要想个新的思路了

6. 我想了一下，要不就重新创一个新的数组并重新赋值；

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里面的值就是你想要改变的地方

这边结尾解释一波，其实这篇文章并没有太多的技术难题，只是想说有的时候你换一个思路可能你会有意外的惊喜，如果还有不理解的请留言~~~。