vue 给不同组件数据添加千分位符且保留两位小数

方法一：使用filter过滤器的方法给普通元素添加千分位符且保留两位小数

<template>
  <div class="app-container">
    {{ obj | modifyObject }}
    {{ obj1 | modifyObject }}
  </div>
</template>
 
<script>

export default {
  components: {},
  data () {
    return {
      obj: '30000.0000',
      obj1: '哈哈哈'
    }
  },
  filters: {
    modifyObject (obj) {
      let numStr = obj.indexOf('.') > 0 ? (obj * 1).toFixed(2) : obj;
      let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
      return thousandSeparated;
    },
  },
  mounted () {

  },
  methods: {


  }
}
</script>

方法二：给table某一个数据通过Vue数据格式化，:formatter的使用

<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" :formatter="rbstateFormat" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>

export default {
  components: {},
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '300000.000'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted () {

  },
  methods: {
    // 金额千分位
    rbstateFormat (row, column, cellValue) {
      let numStr = cellValue.indexOf('.') > 0 ? (cellValue * 1).toFixed(2) : cellValue;
      let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
      return thousandSeparated;
    },
  }
}
</script>

方法三：动态表格进行判断返回数据，对数值型数据添加千分位符且保留两位小数

<template>
  <div class="app-container">
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
      <el-table-column label="2024-01" prop="2024-01">
      </el-table-column>
      <el-table-column label="2024-02" prop="2024-02">
      </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>

export default {
  components: {},
  data () {
    return {
      tableData: [
        {
          "2024-01": "0.61",
          "2024-02": "0.61",
          "2024-03": "0.63",
          "主要经营指标": "供热单位燃料成本"
        },
        {
          "2024-01": "11743.453414",
          "2024-02": "21425.960610",
          "2024-03": "27992.785848",
          "主要经营指标": "售热量"
        },
        {
          "2024-01": "6085.911055",
          "2024-02": "10884.267370",
          "2024-03": "16194.837143",
          "主要经营指标": "发电量"
        },
        {
          "2024-01": "19.23",
          "2024-02": "19.26",
          "2024-03": "19.09",
          "主要经营指标": "煤折标煤价"
        },
        {
          "2024-01": "35.46",
          "2024-02": "40.32",
          "2024-03": "39.22",
          "主要经营指标": "售电单位价格"
        },
        {
          "2024-01": "4.26",
          "2024-02": "4.24",
          "2024-03": "4.34",
          "主要经营指标": "发电单位燃烧成本"
        },
        {
          "2024-01": "5.65",
          "2024-02": "6.00",
          "2024-03": "6.05",
          "主要经营指标": "全口径度电边际贡献"
        },
        {
          "2024-01": "",
          "2024-02": "",
          "2024-03": "",
          "主要经营指标": "风光电装机规模"
        }
      ],
      search: ''
    }
  },
  mounted () {
    console.log(this.tableData, '哈');
    this.getDataList()
  },
  methods: {
    getDataList () {
      this.tableData.forEach(item => {
        this.modifyObject(item)
      });
    },

    modifyObject (obj) {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) { // 确保是对象自有属性，不是原型链上的属性
          // 使用正则表达式添加千分位符和保留两位小数
          let numStr = obj[key].indexOf('.') > 0 ? (obj[key] * 1).toFixed(2) : obj[key];
          let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
          // console.log(thousandSeparated,'thousandSeparated');
          obj[key] = thousandSeparated; // 修改属性的值
        }
      }
      return obj; // 返回修改后的对象
    },
    getVal (val) {
      console.log(val, '---');
    }
  }
}
</script>