elementui el-table 合计栏计算保留千分位

<div>

已于 2022-06-10 13:50:48 修改

阅读量750

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-06-10 13:36:31 首次发布

本文链接：https://blog.csdn.net/max100c/article/details/125219930

版权

 <el-table :data="dataList" border style="width: 100%;" v-loading="dataListLoading" stripe
        :summary-method="getSummaries" show-summary :header-cell-style="tableHeaderCellStyle">
        </el-table>

   getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          // if (index === 2 || index === 3 || index === 4 || index === 5 || index === 6) {
              if (index === 3 || index === 4 || index === 5 || index === 6 || index === 7) {
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              // sums[index] = (sums[index]).toFixed(2); 
            }
          }
        });
        // sums[4] = sums[4] + '%';
        // sums[6] = sums[6] + '%';   
        sums[3] = sums[3].toLocaleString()
         sums[4] = sums[4].toLocaleString() 
          sums[6] = sums[6].toLocaleString() 
        sums[5] = sums[5] + '%';
        sums[7] = sums[7] + '%';
        return sums;
      },
      tableHeaderCellStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return 'background: #1581a8;color:#fff;'
      },

修改合计栏样式

  /deep/ .el-table .el-table__footer-wrapper td {
    background: #1581a8;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
  }