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某个数据通过fileter方式添加千分位符且保留两位小数

<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" label="地址">
        <template slot-scope="{row}">
          <span>{{row.address | rbstateFormat}}</span>
        </template>
      </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 () {

  },
  filters: {
    // 金额千分位
    rbstateFormat (row, column, cellValue) {
      console.log(row, '===');
      let numStr = row.indexOf('.') > 0 ? (row * 1).toFixed(2) : row;
      let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
      return thousandSeparated;
    },
  },
  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>

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

方法一：使用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某个数据通过fileter方式添加千分位符且保留两位小数



<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" label="地址">
        <template slot-scope="{row}">
          <span>{{row.address | rbstateFormat}}</span>
        </template>
      </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 () {



  },
  filters: {
    // 金额千分位
    rbstateFormat (row, column, cellValue) {
      console.log(row, '===');
      let numStr = row.indexOf('.') > 0 ? (row * 1).toFixed(2) : row;
      let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
      return thousandSeparated;
    },
  },
  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.261",
          "2024-02": "0.461",
          "2024-03": "0.563",
          "主要加班单位": "加班日期及小时数88"
        },
        {
          "2024-01": "443335.899",
          "2024-02": "443335.8990",
          "2024-03": "443335.899",
          "主要加班单位": "加班日期及小时数77"
        },
        {
          "2024-01": "443335.899",
          "2024-02": "10884.267443335",
          "2024-03": "443335.899",
          "主要加班单位": "加班日期及小时数66"
        },
        {
          "2024-01": "1549.23",
          "2024-02": "1923.26",
          "2024-03": "19.09",
          "主要加班单位": "加班日期及小时数55"
        },
        {
          "2024-01": "3543.46",
          "2024-02": "545421.32",
          "2024-03": "3945.22",
          "主要加班单位": "加班日期及小时数44"
        },
        {
          "2024-01": "454.26",
          "2024-02": "3487.24",
          "2024-03": "48797.34",
          "主要加班单位": "加班日期及小时数33"
        },
        {
          "2024-01": "5544.65",
          "2024-02": "98986.00",
          "2024-03": "886766.05",
          "主要加班单位": "加班日期及小时数22"
        },
        {
          "2024-01": "",
          "2024-02": "",
          "2024-03": "",
          "主要加班单位": "加班日期及小时数11"
        }
      ],
      search: ''
    }
  },
  mounted () {
    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; // 返回修改后的对象
    },
  }
}
</script>