SOURCE

var Main = {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    window.aa = this
    var list = []
    for (var index = 0; index < 10; index++) {
      list.push({
        name: 'test' + index,
        role: 'developer',
        sex: 'Man',
        date: '2019-05-01',
        time: 1556677810888 + index * 500,
        region: 'ShenZhen',
        address: 'address abc' + index
      })
    }
    this.tableData = list
  },
          methods: {
            footerMethod ({ columns, data }) {
              const means = []
              const sums = []
              const others = []
              columns.forEach((column, columnIndex) => {
                if (columnIndex === 0) {
                  means.push('平均')
                  sums.push('和值')
                  others.push('其他')
                } else {
                  let meanCell = null
                  let sumCell = null
                  let otherCell = '-'
                  switch (column.property) {
                    case 'age':
                    case 'rate':
                      meanCell = parseInt(XEUtils.mean(data, column.property))
                      sumCell = XEUtils.sum(data, column.property)
                      break
                    case 'sex':
                      otherCell = '无'
                      break
                  }
                  means.push(meanCell)
                  sums.push(sumCell)
                  others.push(otherCell)
                }
              })
              // 返回一个二维数组的表尾合计
              return [ means, sums, others ]
            }
          
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>

<div id="app">
  <template>
    <div>
      <vxe-table 
        border
        show-footer
          max-height="300"
          :footer-method="footerMethod"
        :data="tableData">
        <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>
        <vxe-table-column field="name" title="Name" width="200" fixed="left"></vxe-table-column>
        <vxe-table-column field="role" title="Role" width="200"  :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"></vxe-table-column>
        <vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>
        <vxe-table-column field="date" title="Date" width="200"></vxe-table-column>
        <vxe-table-column field="address" title="Address" width="200"></vxe-table-column>
      </vxe-table>
    </div>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css");