a-table末尾行添加合计

原创已于 2024-03-19 15:24:35 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#anti-design-vue

于 2024-03-19 14:53:56 首次发布

本文介绍了如何在Vue项目中，使用AntDesign的Table组件，通过手动计算的方式为表格的最后一列添加总计值，通过遍历数据列表并逐项累加特定字段实现汇总功能。

思路：手动计算出合计值，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>