效果

效果.png

核心代码

<el-table
  :data="tableData"
  style="width: 100%;margin-top: 60px;"
  :header-cell-style="{background: '#F5F8FC'}"
  >
      <el-table-column
      v-for="(item, index) in column"
      :key="index"
      :label="item"
      min-width="140"
      align="right"
      >
          <template #default="scope">
              <span>{{toThousands(scope.row[item].cnt)}}</span>  
              <span style="color: #999;">({{scope.row[item].per}})</span>  
          </template>
      </el-table-column>
</el-table>

数据结构

column: ["2022-07-22", "2022-07-23", "2022-07-24", "2022-07-25", "2022-07-26", "2022-07-27", "2022-07-28"],
tableData: [{
        "2022-07-28": {
            "cnt": 232343,
            "per": "100%"
        },
        "2022-07-27": {
            "cnt": 232340,
            "per": "100%"
        },
        "2022-07-26": {
            "cnt": 232356,
            "per": "100%"
        },
        "2022-07-25": {
            "cnt": 232360,
            "per": "100%"
        },
        "2022-07-24": {
            "cnt": 464654,
            "per": "100%"
        },
        "2022-07-23": {
            "cnt": 232342,
            "per": "100%"
        },
        "2022-07-22": {
            "cnt": 232357,
            "per": "100%"
        }
    }, {
        "2022-07-28": {
            "cnt": 208505,
            "per": "89.74%"
        },
        "2022-07-27": {
            "cnt": 208498,
            "per": "89.74%"
        },
        "2022-07-26": {
            "cnt": 208515,
            "per": "89.74%"
        },
        "2022-07-25": {
            "cnt": 208520,
            "per": "89.74%"
        },
        "2022-07-24": {
            "cnt": 416972,
            "per": "89.74%"
        },
        "2022-07-23": {
            "cnt": 208489,
            "per": "89.73%"
        },
        "2022-07-22": {
            "cnt": 208507,
            "per": "89.74%"
        }
    }, {
        "2022-07-28": {
            "cnt": 23838,
            "per": "10.26%"
        },
        "2022-07-27": {
            "cnt": 23842,
            "per": "10.26%"
        },
        "2022-07-26": {
            "cnt": 23841,
            "per": "10.26%"
        },
        "2022-07-25": {
            "cnt": 23840,
            "per": "10.26%"
        },
        "2022-07-24": {
            "cnt": 47682,
            "per": "10.26%"
        },
        "2022-07-23": {
            "cnt": 23853,
            "per": "10.27%"
        },
        "2022-07-22": {
            "cnt": 23850,
            "per": "10.26%"
        }
    }]

千位符

        // 千位符
        toThousands(num) {
            return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')
        },