1. 程式人生 > 實用技巧 >vue+elementui前端新增數字千位分割

vue+elementui前端新增數字千位分割

效果圖

1、如果el-table表格表尾沒有合計行的話,可以使用下面例子

a、

<el-table-column
          label="借方發生額"
          align="right"
          width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{
            numberFormat(scope.row.jffse)
          }}</template>
</el-table-column>
  methods: {
    numberFormat(cellValue) {
      return cellValue ? cellValue.toLocaleString() : "";
    },
}

b、使用列屬性formatter,參考連結https://blog.csdn.net/qq_40668835/article/details/98494726?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-2-98494726.nonecase&utm_term=element%20%E8%A1%A8%E6%A0%BC%E5%8D%83%E5%88%86%E4%BD%8D%E6%98%BE%E7%A4%BA&spm=1000.2123.3001.4430

<el-table-column label="資金" prop="zj" :formatter="stateFormat"  show-overflow-tooltip/>
stateFormat(cellValue) {
      if (cellValue) {
        cellValue += "";
        if (!cellValue.includes(".")) cellValue += ".";
        return cellValue
          .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
            
return $1 + ","; }) .replace(/\.$/, ""); } },

2、如果有表尾合計行的話,使用下面例子

<el-table
            :data="mxData"
            :header-cell-style="{ 'text-align': 'center' }"
            :max-height="maxHeight"
            highlight-current-row
            :summary-method="getSummaries"
            show-summary
          >
            <el-table-column
              label="借方金額"
              prop="ndebit"
              align="right"
              width="160"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">{{
                stateFormat(scope.row.ndebit)
              }}</template>
            </el-table-column>
            <el-table-column
              label="貸方金額"
              prop="ncredit"
              align="right"
              width="160"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">{{
                stateFormat(scope.row.ncredit)
              }}</template>
            </el-table-column>
          </el-table>
上面的<template slot-scope="scope">{{stateFormat(scope.row.ncredit)}}</template>也可以使用方法1中的numberFormat方法格式化,但是合計方法getSummaries裡面的合計數就得使用本例子的stateFormat方法格式化了,因為我試了
numberFormat函式格式化沒效果。
stateFormat(cellValue) {
      if (cellValue) {
        cellValue += "";
        if (!cellValue.includes(".")) cellValue += ".";
        return cellValue
          .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
            return $1 + ",";
          })
          .replace(/\.$/, "");
      }
    },
    getSummaries(param) {
      const indexs = [0, 2, 3];
      // console.log("---param=", param);
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "合計";
          return;
        } else if (indexs.includes(index)) {
          sums[index] = "";
          return;
        }
        // console.log(data);
        const values = data.map((item) => Number(item[column.property]));
        // console.log(values);
        if (values.every((value) => /^(-)?([0-9]+)(\.\d{1,2})?$/.test(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = this.stateFormat(sums[index].toFixed(2));
          // sums[index] += " 元";
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },