a-table行数据合并 + 动态表头生成

效果图展示

思路流程

1. 后端返回数据二次处理
2. 根据后端数据生成动态表头
3. 利用antd 的 customRender 与 rowSpan 设置行合并

完整代码部分

<template>
  <div class="bg">
    <a-table
      bordered
      :columns="columns"
      :pagination="false"
      :dataSource="dataSource"
      :row-key="(record) => record.id"
    ></a-table>
  </div>
</template>
<script>
import { GetQualifiedDayData } from '@/services/LIMSApis/qualified'

export default {
  name: 'index',
  data() {
    return {
      columns: [],
      // 公共表头
      saveColumnsNode: [
        {
          title: '质量点名称',
          dataIndex: 'pointName',
          align: 'center',
          width: 150,
          customRender: (value, row, index) =>
            this.columnsInit(value, row, index, 3),
        },
        {
          title: '控制范围',
          dataIndex: 'limitRange',
          align: 'center',
          width: 100,
          customRender: (value, row, index) =>
            this.columnsInit(value, row, index, 3),
        },
        {
          title: '属性',
          dataIndex: 'attr',
          align: 'center',
          width: 120,
        },
      ],
      dataSource: [],
    }
  },
  mounted() {
    this.initTable()
  },
  methods: {
    async initTable() {
      // let res = await GetQualifiedDayData(this.params)
      // this.dataSource = this.nodeTable(res)
      // 接口获取数据，此处用data假数据代替返回值
      let data = {
        data: [
          {
            pointName: '名称1',
            limitRange: '<10',
            datas: [
              { date: '1月', valueMax: 100, valueMin: 5, numTotal: 30 },
              { date: '2月', valueMax: 120, valueMin: 15, numTotal: 60 },
              { date: '3月', valueMax: 70, valueMin: 4, numTotal: 50 },
              { date: '4月', valueMax: 60, valueMin: 15, numTotal: 40 },
              { date: '5月', valueMax: 200, valueMin: 2, numTotal: 70 },
              { date: '6月', valueMax: 150, valueMin: 7, numTotal: 90 },
            ],
          },
          {
            pointName: '名称2',
            limitRange: '<12',
            datas: [
              { date: '1月', valueMax: 53, valueMin: 1, numTotal: 55 },
              { date: '2月', valueMax: 86, valueMin: 2, numTotal: 87 },
              { date: '3月', valueMax: 97, valueMin: 2, numTotal: 98 },
              { date: '4月', valueMax: 87, valueMin: 3, numTotal: 89 },
              { date: '5月', valueMax: 97, valueMin: 4, numTotal: 99 },
              { date: '6月', valueMax: 68, valueMin: 2, numTotal: 67 },
            ],
          },
        ],
      }
      this.dataSource = this.nodeTable(data)
    },
    // 步骤一：数据二次处理
    // 原数据
    // {
    //   pointName: '名称1',
    //   limitRange: '<10',
    //   datas: [
    //     { date: '1月', valueMax: 100, valueMin: 5, numTotal: 30 },
    //     { date: '2月', valueMax: 120, valueMin: 15, numTotal: 60 },
    //     ...
    //   ],
    // },
    // 转换为
    // { pointName: '名称1', limitRange: '<10', attr: '最高值', data.1月: '100', data.2月: 120, ... }
    // { pointName: '名称1', limitRange: '<10', attr: '最低值', data.1月: '5', data.2月: 15, ... }
    // { pointName: '名称1', limitRange: '<10', attr: '总次数', data.1月: '30', data.2月: 60, ... }
    nodeTable(res) {
      let arr = []
      res.data.forEach((item) => {
        // 提取公共部分属性
        let commonObj = {
          pointName: item.pointName,
          limitRange: item.limitRange,
        }
        // 添加各自独有的属性值
        let valueMaxArr = { ...commonObj, attr: '最高值' }
        let valueMinArr = { ...commonObj, attr: '最低值' }
        let numTotalArr = { ...commonObj, attr: '总次数' }
        item.datas.forEach((item2) => {
          let str = item2.date
          valueMaxArr['data.' + str] = item2.valueMax
          valueMinArr['data.' + str] = item2.valueMin
          numTotalArr['data.' + str] = item2.numTotal
        })
        arr.push(valueMaxArr)
        arr.push(valueMinArr)
        arr.push(numTotalArr)
      })
      arr = arr.map((item, index) => {
        item.id = index + 1
        return item
      })
      console.log(arr, 'arar')
      // 公共表头 + 动态表头 生成 最终表头
      this.columns = [...this.saveColumnsNode, ...this.changeCoulmns(res)]
      return arr
    },
    // 步骤二：table表头二次处理
    // [
    //   {
    //     title: '1月',
    //     dataIndex: 'data.1月',
    //     align: 'center',
    //   },
    //   {
    //     title: '2月',
    //     dataIndex: 'data.2月',
    //     align: 'center',
    //   },
    //   ...
    // ]
    changeCoulmns(res) {
      let addColumns = []
      if (res.data.length) {
        addColumns = res.data[0].datas.map((item) => {
          let str = item.date
          return {
            title: str,
            dataIndex: `data.${str}`,
            align: 'center',
          }
        })
      }
      return addColumns
    },
    // 步骤三：行合并 rowSpan 设值为 0 时，设置的表格不会渲染。
    columnsInit(value, row, index, num) {
      const obj = {
        children: value,
        attrs: {},
      }
      if (index === 0 || index % num === 0) {
        obj.attrs.rowSpan = num
      }
      for (let i = 1; i <= num; i++) {
        if (index % num === i) {
          obj.attrs.rowSpan = 0
        }
      }
      return obj
    },
  },
}
</script>

<style>
.bg {
  background-color: #fff;
}
</style>