vue element表格双重合并

效果展示

template代码

   <template >
      <el-table
        ref="table"
        border
        stripe
        highlight-current-row
        :data="tableData"
        :span-method="objectSpanMethod"
      >
        <el-table-column
          align="center"
          :width="50"
          label="序号"
          prop="noSort"
        ></el-table-column>
        <el-table-column
          label="交易时间"
          :min-width="140"
          prop="applyDate"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="交易人"
          min-width="90"
          prop="payer"
          align="center"
        ></el-table-column>
        <el-table-column
          label="项目类型"
          min-width="90"
          prop="itemType"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="项目" min-width="100" show-overflow-tooltip>
          <el-table-column
            label="项目名称"
            min-width="100"
            prop="itemName"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="金额"
            min-width="100"
            align="right"
            prop="itemAmt"
            show-overflow-tooltip
          ></el-table-column>
        </el-table-column>
      </el-table>
    </template>

表格数据

  tableData: [
        {
          applyDate: '2024-04-26',
          payer: '项目1',
          id: 1,
          itemGroupList: [
            {
              itemType: '项目1-项目类型1',
              itemList: [
                {
                  itemName: '项目1-1',
                  itemAmt: 0.01
                },
                {
                  itemName: '项目1-2',
                  itemAmt: 0.01
                }
              ]
            },
            {
              itemType: '项目1-项目类型1',
              itemList: [
                {
                  itemName: '项目1-1-1',
                  itemAmt: 0.01
                },
                {
                  itemName: '项目1-2-1',
                  itemAmt: 0.01
                }
              ]
            },
            {
              itemType: '项目1-项目类型2',
              itemList: [
                {
                  itemName: '项目2-1',
                  itemAmt: 0.02
                },
                {
                  itemName: '项目2-2',
                  itemAmt: 0.02
                },
                {
                  itemName: '项目2-3',
                  itemAmt: 0.02
                }
              ]
            }
          ]
        },
        {
          applyDate: '2024-04-27',
          payer: '项目2',
          id: 2,
          itemGroupList: [
            {
              itemType: '项目2-项目类型1',
              itemList: [
                {
                  itemName: '项目1-1',
                  itemAmt: 0.01
                },
                {
                  itemName: '项目1-2',
                  itemAmt: 0.01
                }
              ]
            }
          ]
        }
      ]

数据处理&表格合并

 created() {
    let { data, idIndexArr, itemTypeIndexArr } = this.getSpanArr(
      this.formatTableData(this.tableData)
    )
    this.tableData = data
    this.idIndexArr = idIndexArr
    this.itemTypeIndexArr = itemTypeIndexArr
  },
  methods: {
    // 格式化数据
    formatTableData() {
      let formatArr = []
      let obj = {}
      this.tableData.forEach(_ => {
        _.itemGroupList.forEach(el => {
          el.itemList.forEach(element => {
            obj = {
              itemType: el.itemType,
              itemName: element.itemName,
              itemAmt: element.itemAmt
            }
            formatArr.push({
              ..._,
              ...obj
            })
          })
        })
      })
      return formatArr
    },
    // 合并同类型
    getSpanArr(data) {
      // 把需要合并行的归类, data是表格数据
      let idIndexArr = []
      let idTablePos = 0
      let ids = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          // 第一行必须存在
          idIndexArr.push(1)
          idTablePos = 0
        } else {
          if (data[i].id === data[i - 1].id) {
            if (data[i].itemType === data[i - 1].itemType) {
            }
            idIndexArr[idTablePos] += 1
            idIndexArr.push(0)
          } else {
            idIndexArr.push(1)
            idTablePos = i
          }
        }
      }
      idIndexArr.forEach(el => {
        if (el !== 0) {
          ids.push(el)
        }
      })
      //根据项目类型合并
      let preIndex = 0
      let nexIndex = 0
      let itemTypeIndexArr = []
      for (let i in ids) {
        let newArr = []
        if (i == 0) {
          newArr = data.slice(0, ids[i])
          nexIndex += ids[i]
        } else {
          nexIndex += ids[i]
          newArr = data.slice(preIndex, nexIndex)
        }
        preIndex += ids[i]
        let itemTypetTbleArr = []
        let itemTypetTblePos = 0
        for (let i = 0; i < newArr.length; i++) {
          if (i === 0) {
            // 第一行必须存在
            itemTypetTbleArr.push(1)
            itemTypetTblePos = 0
          } else {
            if (newArr[i].itemType === newArr[i - 1].itemType) {
              itemTypetTbleArr[itemTypetTblePos] += 1
              itemTypetTbleArr.push(0)
            } else {
              itemTypetTbleArr.push(1)
              itemTypetTblePos = i
            }
          }
          if (i === newArr.length - 1) {
            itemTypeIndexArr.push(...itemTypetTbleArr)
          }
        }
      }
      // 表格序号
      let noSort = -1
      for (let n in idIndexArr) {
        if (idIndexArr[n] > 0) {
          noSort = noSort + 1
          this.$set(data[n], 'noSort', Number(noSort) + 1)
        }
      }
      return {
        data,
        idIndexArr,
        itemTypeIndexArr
      }
    },
    objectSpanMethod({ rowIndex, column }) {
      // 项目类型行合并
      if (column.property === 'itemType') {
        // 判断列的属性
        const row1 = this.itemTypeIndexArr[rowIndex]
        return {
          rowspan: row1,
          colspan: 1
        }
      }
      // 除项目名称及项目金额外的行合并
      if (column.property !== 'itemName' && column.property !== 'itemAmt') {
        // 判断列的属性
        const row1 = this.idIndexArr[rowIndex]
        return {
          rowspan: row1,
          colspan: 1
        }
      }
    },
    }