010：vue结合el-table实现表格小计总计需求（summary-method）

1. 实现效果

2. 核心部分

1. el-table 添加如下配置，添加 show-summary 属性，配置 summary-method 函数

<el-table
  .......
  show-summary
  :summary-method="getSummaries"
>
	......
</el-table>

2. getSummaries 计算小计/总计逻辑

getSummaries(param) {
   
  // 计算小计
  let result = this.tableData
  let sumTotalData = Object.assign({
   }, emptyTotalData)
  result.forEach((item) => {
   
    sumTotalData.age += Number(item.age)
    sumTotalData.height += Number(item.height)
  })
  // 计算总计
  let totalResult = this.statistics
  return [
    <span>
      <strong> 小计 </strong>
      <br />
      <strong> 总计 </strong>
    </span>,
    <span> </span>,
    <span> </span>,
    <span>
      <span> {
   sumTotalData.age} </span> <br />
      <span> {
   totalResult.age} </span>
    </span>,
    <span>
      <span> {
   sumTotalData.height} </span> <br />
      <span> {
   totalResult.height} </span>
    </span>,
  ]
},

3. 完整组件代码

<template>
  <div class="home">
    <div class="body">
      <el-table
        :data="tableData"
        border
        row-key="date"
        class="draggable-table"
        style="width: 100%"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column type="index" label="序号" width="200" />
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="height" label="身高" />
      </el-table>
    </div>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  let emptyTotalData = {
     
    age: 0,
    height: 0,
  }
  export default {
     
    name: 'Demo',
    data() {
     
      return {
     
        tableData: [], //table数据
        statistics: 0, //总计数据
      }
    },
    mounted() {
     
      // 调用后端接口table数据
      this.tableData = [
        {
      date: '2024-01-02', name: '张三1', age: '10', height: '165' },
        {
      date: '2024-01-03', name: '李四2', age: '11', height: '174' },
        {
      date: '2024-01-04', name: '王五3', age: '12', height: '174' },
        {
      date: '2024-01-05', name: '麻六4', age: '14', height: '185' },
        {
      date: '2024-01-07', name: 'kk5', age: '44', height: '179' },
        {
      date: '2024-01-08', name: 'fantay6', age: '21', height: '171' },
      ]
      // 调用后端接口返回的总计数据
      this.statistics = {
     
        age: '112',
        height: '1048',
      }
    },
    methods: {
     
      getSummaries(param) {
     
        // 计算小计
        let result = this.tableData
        let sumTotalData = Object.assign({
     }, emptyTotalData)
        result.forEach((item) => {
     
          sumTotalData.age += Number(item.age)
          sumTotalData.height += Number(item.height)
        })
        // 计算总计
        let totalResult = this.statistics
        return [
          <span>
            <strong> 小计 </strong>
            <br />
            <strong> 总计 </strong>
          </span>,
          <span> </span>,
          <span> </span>,
          <span>
            <span> {
     sumTotalData.age} </span> <br />
            <span> {
     totalResult.age} </span>
          </span>,
          <span>
            <span> {
     sumTotalData.height} </span> <br />
            <span> {
     totalResult.height} </span>
          </span>,
        ]
      },
    },
  }
</script>

<style scoped lang="scss">
  .home {
     
    .body {
     
      width: 890px;
      height: 500px;
      border: #31aab2 solid 10px;
      box-sizing: border-box;
      padding: 20px;
      box-sizing: border-box;
    }
  }
</style>

4. 注意点

1. 没什么注意的，比较简单，记录下，方便自己以后查看 😎