elementui合计

ElementUI 合计功能实现

ElementUI 的表格组件（el-table）提供了合计行功能，可以通过设置 show-summary 属性和 summary-method 方法来自定义合计行的显示内容和计算逻辑。

基本用法

在 el-table 上添加 show-summary 属性即可显示默认的合计行：

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

自定义合计方法

使用 summary-method 可以自定义合计行的计算逻辑和显示内容：

<el-table 
  :data="tableData" 
  show-summary
  :summary-method="getSummaries">
  <!-- 列定义 -->
</el-table>

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]))
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
        sums[index] += ' 元'
      } else {
        sums[index] = 'N/A'
      }
    })
    return sums
  }
}

合计行样式定制

可以通过 CSS 自定义合计行的样式：

.el-table__footer {
  background-color: #f5f7fa;
  font-weight: bold;
}

注意事项

• 合计行默认会显示在所有数据的最后一行
• 如果数据是分页加载的，合计行只会计算当前页的数据
• 对于复杂的合计逻辑，可以在 summary-method 中实现自定义计算
• 合计行可以显示文本、数值或任何自定义内容

动态合计示例

实现根据用户选择动态计算某些列的合计：

getSummaries(param) {
  const { columns, data } = param
  const sums = []
  const selectedColumns = ['amount', 'quantity'] // 需要合计的列

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

    if (selectedColumns.includes(column.property)) {
      const values = data.map(item => Number(item[column.property]))
      sums[index] = values.reduce((a, b) => a + b, 0)
    } else {
      sums[index] = '-'
    }
  })

  return sums
}

通过以上方法可以灵活实现 ElementUI 表格的各种合计需求。