Elementui总计

Element UI 总计功能实现

Element UI 的表格组件（el-table）支持通过自定义表尾（footer）实现总计功能。以下是两种常见实现方式：

自定义表尾插槽

通过 slot="append" 插入自定义表尾，手动计算并显示总计数据：

<el-table :data="tableData" border>
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="amount" label="金额"></el-table-column>

  <template slot="append">
    <tr class="total-row">
      <td>总计</td>
      <td>{{ totalAmount }}</td>
    </tr>
  </template>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '项目1', amount: 100 },
        { name: '项目2', amount: 200 }
      ]
    }
  },
  computed: {
    totalAmount() {
      return this.tableData.reduce((sum, item) => sum + item.amount, 0)
    }
  }
}
</script>

<style>
.total-row {
  font-weight: bold;
  background-color: #f5f7fa;
}
</style>

使用 summary-method

通过 show-summary 属性和 summary-method 方法实现自动计算：

<el-table 
  :data="tableData" 
  border 
  show-summary
  :summary-method="getSummaries">
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="amount" label="金额"></el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '项目1', amount: 100 },
        { name: '项目2', amount: 200 }
      ]
    }
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }

        const values = data.map(item => Number(item[column.property]))
        sums[index] = values.reduce((prev, curr) => prev + curr, 0)
      })

      return sums
    }
  }
}
</script>

多列计算与格式化

对于需要特殊格式的汇总数据：

getSummaries(param) {
  const sums = []
  param.columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }

    const values = param.data.map(item => Number(item[column.property]))
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        return prev + (isNaN(curr) ? 0 : curr)
      }, 0)

      // 添加单位或格式化
      if (column.property === 'amount') {
        sums[index] += ' 元'
      }
    }
  })
  return sums
}

注意事项

• 数值型数据需用 Number() 转换避免字符串拼接
• 空值处理建议使用 isNaN() 检查
• 复杂计算场景建议在服务端完成汇总
• 固定表尾样式可通过 row-style 或 CSS 自定义