思路:手动计算出合计值,push到最后数组最后列。
在这里插入图片描述

    <a-table
      bordered
      :rowKey="record=>record.id"
      :columns="columns"
      :data-source="sumList"
      :pagination="pagination"
      :scroll="{ y: 'calc(80vh - 530px)', x: true }"
      :customHeaderRow="customHeaderRow"
    >
    </a-table>
data() {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        showTotal: val => `总计:${val}`
      },
      dataList: [
        { id: 1, theSsjd: '沙洲街道', theJmzzxq: 2},
	    { id: 2, theSsjd: '南苑街道', theJmzzxq: 2},
      ],
      columns: [
        { title: '序号', customRender: (_, r, i) => (this.pagination.pageNo - 1) * this.pagination.pageSize + i + 1, width: 50, fixed: 'left' },
        { dataIndex: 'theSsjd', title: '所属街道', width: 80, fixed: 'left' },
        { dataIndex: 'theJmzzxq', title: '居民住宅小区(个)', width: 80, },
      ]
    };
  },
  created() {
    // this.getData()
  },
  computed: {
    sumList: function() {
      const sumObject = { id: this.dataList.length + 1, theSsjd: '合计', theJmzzxq: 0 };
      this.dataList.forEach(item => {
        if(typeof item === "object" && item !== null) {
          for (const key in item) {
            if(key !== 'id' && key !== 'theSsjd') {
              if(sumObject[key]) {
                sumObject[key] += item[key]
              } else {
                sumObject[key] = item[key]
              }
            }
          }
        }
      })
      const list = [...this.dataList, sumObject]
      return list
    }
  },
<style lang="less" scoped>

/deep/tr:last-child td {
  background: #fff;
  position: sticky;
  bottom: 0px;
  z-index: 1;
  box-shadow: 5px 0 10px #e4e4e4;
}
</style>
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐