【vue2+elementUI】el-table同时添加小计和合计，并固定表头。

在Vue2结合Element UI的环境下，可以通过el-table组件的show-summary和fixed-header属性来实现小计和合计功能，并且固定表头。

以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    border
    show-summary
    :summary-method="getSummaries"
    style="width: 100%"
    fixed-header
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ...更多数据
      ]
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
 
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
        } else {
          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);
          } else {
            sums[index] = 'N/A';
          }
        }
      });
 
      return sums;
    }
  }
};
</script>

在这个例子中，el-table组件的show-summary属性被设置为true以展示小计行，summary-method属性用于自定义合计的计算方法。getSummaries方法会对指定列的数据进行计算，并返回合计值。fixed-header属性用于固定表头。