SOURCE

const Main = {
    data() {
        return {
            loading: false,
            tableData: [],
            tablePage: {
                currentPage: 1,
                pageSize: 10,
                totalResult: 0
            }
        }
    },
    mounted() {
        this.findList()
    },
    methods: {
        findList() {
            this.loading = true
            setTimeout(() => {
                this.mockList(500).then(data => {
                    this.tableData = data
                    this.loading = false
                    this.tablePage.totalResult = data.length
                })
            }, 1000)
        },
        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)
            })
        },
        handlePageChange({ currentPage, pageSize }) {
            this.tablePage.currentPage = currentPage
            this.tablePage.pageSize = pageSize
            this.findList()
        },
        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 '无'
                })
            ]
        }
    }
};
const 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 class="content-warp">
			<vxe-table border show-overflow show-header-overflow show-footer-overflow show-footer ref="xTable2" height="300" :sort-config="{trigger: 'cell'}"
			 :footer-method="footerMethod" :scroll-x="{gt: 10}" :scroll-y="{gt: 100}" :loading="loading" :data="tableData">
				<vxe-table-column type="seq" width="100"></vxe-table-column>
				<vxe-table-column field="name" title="Name" width="150" sortable></vxe-table-column>
				<vxe-table-column field="sex" title="Sex" width="100"></vxe-table-column>
				<vxe-table-column field="age" title="Age" width="100"></vxe-table-column>
				<vxe-table-column field="num" title="Num" width="100"></vxe-table-column>
				<vxe-table-column field="num2" title="Num2" width="100"></vxe-table-column>
				<vxe-table-column field="address" title="Address" width="200" show-overflow></vxe-table-column>
                <vxe-table-column type="seq1" width="100"></vxe-table-column>
				<vxe-table-column field="name1" title="Name" width="150" sortable></vxe-table-column>
				<vxe-table-column field="sex1" title="Sex" width="100"></vxe-table-column>
				<vxe-table-column field="age1" title="Age" width="100"></vxe-table-column>
				<vxe-table-column field="num1" title="Num" width="100"></vxe-table-column>
				<vxe-table-column field="num21" title="Num2" width="100"></vxe-table-column>
				<vxe-table-column field="address1" title="Address" width="200" show-overflow></vxe-table-column>
			</vxe-table>
			<vxe-pager border size="medium" :loading="loading" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
			 :total="tablePage.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
			</vxe-pager>
			<vxe-toolbar>
				<template #buttons>
					<vxe-button @click="loadList(50)">50条</vxe-button>
				</template>
			</vxe-toolbar>
		</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;
}