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>