CostumingPlatform/ant-design-vue-jeecg/src/views/jeecg/TableTotal.vue

<template>
  <a-card :bordered="false">
    <a-table
      rowKey="rowIndex"
      bordered
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      @change="handleTableChange"
    >
    </a-table>
  </a-card>
</template>

<script>
  export default {
    name: 'TableTotal',
    data() {
      return {
        columns: [
          {
            title: '#',
            width: '180px',
            align: 'center',
            dataIndex: 'rowIndex',
            customRender: function (text, r, index) {
              return (text !== '合计') ? (parseInt(index) + 1) : text
            }
          },
          {
            title: '姓名',
            dataIndex: 'name',
          },
          {
            title: '贡献点',
            dataIndex: 'point',
          },
          {
            title: '等级',
            dataIndex: 'level',
          },
          {
            title: '更新时间',
            dataIndex: 'updateTime',
          },
        ],
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        dataSource: [
          { id:"1",name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
          { name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
          { name: '李四', point: 53, level: 8, updateTime: '2019-8-12' },
          { name: '小红', point: 44, level: 5, updateTime: '2019-8-11' },
          { name: '王五', point: 97, level: 10, updateTime: '2019-8-10' },
          { name: '小明', point: 33, level: 2, updateTime: '2019-8-10' },
          { name: '小张', point: 33, level: 2, updateTime: '2019-8-10' },
          { name: '小六', point: 33, level: 2, updateTime: '2019-8-10' },
          { name: '小五', point: 33, level: 2, updateTime: '2019-8-10' },
          { name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
          { name: '李华', point: 33, level: 2, updateTime: '2019-8-10' },
          { name: '小康', point: 33, level: 2, updateTime: '2019-8-10' },
          { name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10' },
        ],
        newArr:[],
        newDataSource:[],
      }
    },
    mounted() {
      // this.tableAddTotalRow(this.columns, this.dataSource)
      /*新增分页合计方法*/
      this.newDataSource=this.dataSource
      this.dataHandling(this.ipagination.pageSize-1)
    },
    watch:{
      'ipagination.pageSize':function(val) {
        this.dataHandling(val-1)
      }
    },
    methods: {
      /** 表格增加合计行 */
      tableAddTotalRow(columns, dataSource) {
        let numKey = 'rowIndex'
        let totalRow = { [numKey]: '合计' }
        columns.forEach(column => {
          let { key, dataIndex } = column
          if (![key, dataIndex].includes(numKey)) {

            let total = 0
            dataSource.forEach(data => {
              total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
              console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
            })

            if (Number.isNaN(total)) {
              total = '-'
            }
            totalRow[dataIndex] = total
          }
        })

        dataSource.push(totalRow)
      },
      handleTableChange(pagination, filters, sorter) {
        this.ipagination = pagination;
      },
      /*如果分页走这个方法*/
      dataHandling(num) {
        this.newArr=[];
        let arrLength = this.newDataSource.length; // 数组长度;
        let index = 0;
        for (let i = 0; i < arrLength; i++) {
          if (i % num === 0 && i !== 0) {
            this.newArr.push(this.newDataSource.slice(index, i));
            index = i;
          }
          if ((i + 1) === arrLength) {
            this.newArr.push(this.newDataSource.slice(index, (i + 1)));
          }
        }
        var arrs=this.newArr;
        for (let i =0;i<arrs.length;i++){
          let arr = arrs[i];
          let newArr= { };
          newArr.name="-";
          newArr.updateTime="-";
          newArr.rowIndex="合计"
          var level=0;
          var point=0;
          for (let j=0;j<arr.length;j++){
            level+=arr[j].level;
            point+=arr[j].point;
          }
          newArr.level=level;
          newArr.point=point;
          arrs[i].push(newArr);
        }
        var newDataSource=[];
        for (let i =0;i<arrs.length;i++){
          let arr = arrs[i];
          for(var j in arr){
            newDataSource.push(arr[j]);
          }
        }
        console.log(this.dataSource)
        this.dataSource = Object.values(newDataSource);
        console.log(this.dataSource)
      }
    }
  }
</script>

<style scoped>

</style>