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(/.$/, "");
      }
    },

 如果固定两位小数，可以这样

stateFormat(cellValue) {
      if (cellValue) {
        return Number(cellValue)
          .toFixed(2)
          .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) {
        return Number(cellValue)
          .toFixed(2)
          .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;
    },