SoFunction
Updated on 2025-04-06

Example of converting Vue front-end numerical values ​​into thousandths format and retaining two-digit decimal code

1. The front-end uses elg-pro-table data table:

<elg-pro-table
          class="custom-card"
          ref="table"
          :datasource="url"
          :columns="columns"
          :where="where"
          :border="true"
          :toolkit="[]"
          toolbar
          :loading="loading"
        >
</elg-pro-table>

2. The columns table is used:

 // Table column configuration columns: [
        {
          prop: 'voucherNo',
          label: 'Voucher number',
          showOverflowTooltip: true,
          minWidth: 100 ,
          className: 'textType'
        },
        {
          prop: 'originalCurrencyDebit',
          label: 'Debit amount',
          showOverflowTooltip: true,
          minWidth: 120,
          className: 'moneyType',
          formatter:  (value) =&gt; {//Use formatter, where value is a row of data in the entire columns              //Consistent with the content of the above prop              return ();
          }
        },
],

3. Where () method is a referenced API method:

//Numerical conversionchangeMoney(value){
   if(value === ""){//When the value is empty, the front desk displays-         return '-'
   }else{
// When value is equal to 0 or string 0, display-        if ("0.00"===value || "0"===value || value ===0 || value ===0.00) {
           return '-'
        }else{
//Judge whether a variable value is less than 0.  If the value is less than 0, then the value of isNegative is true, otherwise it is false.   let isNegative = value &lt; 0;
//The following line of code is to convert a numeric value into a string in the form of a thousandth digit and retain two decimals.  The specific steps are as follows: //1. Use the (value) function to get the absolute value of the value to ensure that the result is a positive number. //2. Use the parseFloat() function to convert absolute values ​​to floating point types. //3. Use the toFixed(2) method to retain two decimal places for floating point number. //4. Use the regular expression /\d(?=(\d{3})+\.)/g to match every three digits before the decimal point and add a comma separator before it. //5. The final result is stored in the variable result. let result = parseFloat((value)).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&amp;,');
        if (isNegative) {//When isNegative is false, add - to the following data            result = '-' + result;
         }
         return  result
        }
    }
},

This ends.

Style Tips:

&lt;style&gt;
        /* Centered by default */
  .custom-card .el-table__body td {
      text-align: center;
  }
  /* The amount is on the right side */
  .custom-card .el-table__body  {
      text-align: right;
  }
  /* Text class is on the left */
  .custom-card .el-table__body  {
      text-align: left;
  }
&lt;/style&gt;

Summarize

This is the article about converting Vue front-end values ​​into thousandths format and retaining two decimals. For more related content on Vue value conversion of thousandths, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!