vxe-table/examples/views/table/base/Basic.vue

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      gridOptions: {
        border: true,
        showFooter: true,
        autoResize: false,
        height: 400,
        columns: [
          { field: 'a', title: 'a', width: 47 },
          { field: 'b', title: 'b', width: 55 },
          { field: 'c', title: 'c', width: 105 },
          { field: 'd', title: 'd', width: 200 },
          { field: 'e', title: 'e', width: 200 },
          { field: 'f', title: 'f', width: 200 },
          { field: 'g', title: 'g', width: 410 }
        ],
        footerMethod ({ columns, data }) {
          return [
            columns.map((column, columnIndex) => {
              if (columnIndex === 0) {
                return '平均'
              }
              if (['age', 'rate'].includes(column.field)) {
                return this.meanNum(data, column.field)
              }
              return ''
            })
          ]
        },
        data: [
          {
            id: 10001,
            name: 'Test1',
            nickname: 'T1',
            role: 'Develop',
            sex: 'Man',
            age: 28,
            rate: 6,
            address: 'Shenzhen'
          },
          {
            id: 10002,
            name: 'Test2',
            nickname: 'T2',
            role: 'Test',
            sex: 'Women',
            age: 22,
            rate: 5,
            address: 'Guangzhou'
          },
          {
            id: 10003,
            name: 'Test3',
            nickname: 'T3',
            role: 'PM',
            sex: 'Man',
            age: 32,
            rate: 4,
            address: 'Shanghai'
          },
          {
            id: 10004,
            name: 'Test4',
            nickname: 'T4',
            role: 'Designer',
            sex: 'Women',
            age: 23,
            rate: 1,
            address: 'Shenzhen'
          },
          {
            id: 10005,
            name: 'Test5',
            nickname: 'T5',
            role: 'Develop',
            sex: 'Women',
            age: 30,
            rate: 5,
            address: 'Shanghai'
          },
          {
            id: 10006,
            name: 'Test6',
            nickname: 'T6',
            role: 'Designer',
            sex: 'Women',
            age: 21,
            rate: 2,
            address: 'Shenzhen'
          },
          {
            id: 10007,
            name: 'Test7',
            nickname: 'T7',
            role: 'Test',
            sex: 'Man',
            age: 29,
            rate: 7,
            address: 'Shenzhen'
          },
          {
            id: 10008,
            name: 'Test8',
            nickname: 'T8',
            role: 'Develop',
            sex: 'Man',
            age: 35,
            rate: 5,
            address: 'Shenzhen'
          }
        ]
      }
    }
  },
  methods: {
    meanNum (list, field) {
      let count = 0
      list.forEach((item) => {
        count += Number(item[field])
      })
      return count / list.length
    }
  }
}
</script>