SOURCE

var Main = {
    data() {
        return {}
    },
    mounted() {
        this.$nextTick(() => {
            const $table = this.$refs.xTable2
            this.mockList(6).then(data => {
                if ($table) {
                    $table.loadData(data)
                }
            })
        })
    },
    methods: {
        mockList(size) {
            return new Promise(resolve => {
                const list = []
                for (let index = 0; index < size; index++) {
                    list.push({
                        name: `名称${index}`,
                        sex: '0',
                        num: 123,
                        age: 18,
                        num2: 234,
                        rate: 3,
                        address: 'shenzhen'
                    })
                }
                resolve(list)
            })
        },
        footerMethod({ columns, data }) {
            // 返回一个二维数组的表尾合计
            console.log(data.length)
            return [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '平均'
                    }
                    switch (column.property) {
                        case 'age':
                        case 'rate':
                        case 'num':
                        case 'num2':
                            return parseInt(XEUtils.mean(data, column.property))
                    }
                    return '无'
                })
            ]
        }
    }
}

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>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
	<template>
		<div>
			<vxe-table border highlight-current-row ref="xTable2" height="300" :sort-config="{trigger: 'cell'}" :scroll-x="{gt: 10}"
			 :scroll-y="{gt: 100}">
				<vxe-column type="seq" width="100"></vxe-column>
				<vxe-column field="name" title="Name" width="150" sortable></vxe-column>
				<vxe-column field="sex" title="Sex" width="100"></vxe-column>
				<vxe-column field="age" title="Age" width="100"></vxe-column>
				<vxe-column field="num" title="Num" width="100"></vxe-column>
				<vxe-column field="num2" title="Num2" width="100"></vxe-column>
				<vxe-column field="attr19" title="Name" width="150" sortable></vxe-column>
				<vxe-column field="attr18" title="Sex" width="100"></vxe-column>
				<vxe-column field="attr17" title="Age" width="100"></vxe-column>
				<vxe-column field="date3" title="Date" width="200" show-overflow></vxe-column>
				<vxe-column field="role" title="Role" width="100"></vxe-column>
				<vxe-column field="attr16" title="Age" width="100"></vxe-column>
				<vxe-column field="attr15" title="Num2" width="100"></vxe-column>
				<vxe-column field="attr14" title="Sex" width="100"></vxe-column>
				<vxe-column field="attr13" title="Name" width="150" sortable></vxe-column>
				<vxe-column field="attr12" title="Sex" width="100"></vxe-column>
				<vxe-column field="attr11" title="Age" width="100"></vxe-column>
				<vxe-column field="attr1" title="Num" width="100"></vxe-column>
				<vxe-column field="address" title="Address" width="200" show-overflow></vxe-column>
				<vxe-column field="attr2" title="Role" width="100"></vxe-column>
				<vxe-column field="attr3" title="Age" width="100"></vxe-column>
				<vxe-column field="attr4" title="Num2" width="100"></vxe-column>
				<vxe-column field="attr5" title="Rate" width="100"></vxe-column>
				<vxe-column field="attr6" title="Name" width="150" sortable></vxe-column>
				<vxe-column field="attr7" title="Date" width="200" show-overflow></vxe-column>
				<vxe-column field="attr8" title="Role" width="100"></vxe-column>
				<vxe-column field="attr9" title="Num" width="100"></vxe-column>
				<vxe-column field="attr10" title="Address" width="200" show-overflow></vxe-column>
			</vxe-table>
		</div>
	</template>
</div>

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

.sortable-column-demo .vxe-header--row .vxe-header--column.sortable-ghost,
.sortable-column-demo .vxe-header--row .vxe-header--column.sortable-chosen {
  background-color: #dfecfb;
}