表格各项目小计（应收租金、未收租金）

返回数据结构

页面展示效果：

//html

 <el-table

          :height="200"

          v-if="columns.length > 0"

          :data="dataSource"

          border

          v-loading="loading"

          show-summary

          :summary-method="getSummaries"

          :span-method="objectSpanMethod"

          :row-class-name="

            ({ row, rowIndex }) => {

              return row.className

            }

          "

        >

          <el-table-column

            :align="item.align || 'center'"

            :prop="item.key"

            :label="item.name"

            v-for="item in columns"

            :key="item.name"

            :width="item.width"

            min-width="100"

            :show-overflow-tooltip="item.showTooltip"

            :class-name="item.className"

          >

            <template slot-scope="scope">

              <template v-if="item.key == 'xmmc'">

                {{ scope.row.xmmc || '--' }}

              </template>

              <template v-else>

                <template v-if="item.formatNum">{{ formatNumber(scope.row[item.key]) }}</template>

                <template v-else>{{ scope.row[item.key] }}</template>

              </template>

            </template>

          </el-table-column>

        </el-table>

//data

      dataSource: [],

columns: [

        { name: '项目名称', key: 'xmmc', align: 'left', showTooltip: true, minWidth: 100 },

        { name: '乙方', key: 'yf', align: 'left', showTooltip: true, minWidth: 100 },

        { name: '电话', key: 'tel', align: 'center', width: 120 },

        { name: '资源名称', key: 'zymc', align: 'center', minWidth: 150, showTooltip: true },

        { name: '应收日期', key: 'jfqx', align: 'center', width: 100 },

        { name: '计费开始日期', key: 'ksrq', align: 'center', width: 120 },

        { name: '计费截止日期', key: 'jsrq', align: 'center', width: 120 },

        { name: '应收租金', key: 'yjzj', align: 'right', formatNum: true, width: 120 },

        { name: '未收租金', key: 'qjzj', align: 'right', formatNum: true, width: 120 },

        { name: '欠款天数', key: 'qfsc', align: 'center', width: 85 },

      ],

//调用接口返回数据

 getList(params) {

      this.loading = true

      getQzmxList(params)

        .then((res) => {

          if (res.code == 200) {

            let arr = []

            res.data.list.forEach((item) => {

              let { xmmc, qzzje, details } = item

              xmmc = xmmc || '--'

              details = details.map((o) => ({ ...o, xmmc: o.xmmc || '--' }))

              arr = [...arr, ...details]

              arr.push({

                xmmc: xmmc + '小计',

                qjzj: qzzje,

                className: 'sum-row',

              })

            })

            this.dataSource = arr

          }

        })

        .finally(() => {

          this.loading = false

        })

    },

//js方法methods

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {

      if (column.property === 'xmmc') {

        // 获取当前单元格的值

        const currentValue = row[column.property]

        // 获取上一行相同列的值

        const preRow = this.dataSource[rowIndex - 1]

        const preValue = preRow ? preRow[column.property] : null

        // 如果当前值和上一行的值相同，则将当前单元格隐藏

        if (currentValue === preValue) {

          // return { rowspan: 0, colspan: 0 }

          return { rowspan: 0, colspan: row.className == 'sum-row' ? 8 : 0 }

        } else {

          // 否则计算当前单元格应该跨越多少行

          let rowspan = 1

          for (let i = rowIndex + 1; i < this.dataSource.length; i++) {

            const nextRow = this.dataSource[i]

            const nextValue = nextRow[column.property]

            if (nextValue === currentValue) {

              rowspan++

            } else {

              break

            }

          }

          return { rowspan, colspan: row.className == 'sum-row' ? 8 : 1 }

        }

      } else if (column.property == 'qjzj' || column.property == 'qfsc') {

        return {

          rowspan: 1,

          colspan: 1,

        }

      } else {

        if (row.className == 'sum-row') {

          return {

            rowspan: 1,

            colspan: 0,

          }

        }

      }

    },

  getSummaries(param) {

      const { columns, data } = param

      const sums = []

      columns.forEach((column, index) => {

        if (index === 0) {

          sums[index] = '合计'

          return

        }

        if (this.sumKeys.includes(column.property)) {

          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] += ' '

          } else {

            sums[index] = ''

          }

          if (column.property == 'qjzj') {

            sums[index] = sums[index] / 2

          }

          sums[index] = this.formatNumber(sums[index])

        }

      })

      return sums

    },