后端代码不变，src/views/table2.vue文件内容
<template> <div> <h1>服务端分页并排序，过滤</h1> <Table :columns="column" :data="data" :loading="loading" border @on-sort-change="handleSortChange" @on-filter-change="handleFilterChange" size="small"></Table> <div> <Page :total="total" show-sizer :current.sync="current" @on-change="getData" @on-page-size-change="handleChangeSize"></Page> </div> </div> </template> <script> import axios from 'axios' export default { data() { return { total: 0, current: 1, size:10, loading: false, sortType: 'normal', // normal || asc || desc filterType: undefined, // undefined,1,2 column: [ { title: "ID", key: 'id', sortable: 'custom' }, { title: "用户名", key: 'name' }, { title: "邮箱", key: 'email' }, { title: "等级", key: 'status', render: (h, {row}) => { if (row.status === 1) { return h('Tag', { props: { color: 'green' } }, "等级 1") } else if (row.status === 2) { return h('Tag', { props: { color: 'red' } }, "等级 2") } else if (row.status === 3) { return h('Tag', { props: { color: 'blue' } }, "等级 3") } }, filters: [ { label: '级别 1', value: 1 }, { label: '级别 2', value: 2 }, { label: '级别 3', value: 3 }, ], filterMultiple: false, filterRemote(value) { console.log(value); this.filterType = value[0]; } } ], data: [] } }, methods: { handleSortChange({columns, key, order}) { this.sortType = order; this.current = 1; this.getData(); }, handleFilterChange() { this.current = 1; this.getData(); }, handleChangeSize (val){ this.size = val; this.$nextTick(() => { this.getData(); }) }, getData() { if (this.loading) return; this.loading = true; axios.get(`:8000/get_user/?current=${this.current}&size=${this.size}&sortType=${this.sortType}&filterType=${this.filterType}`).then(res => { if(res.data.result) { this.data = res.data.data.list; this.total = res.data.data.total; this.loading = false; } else { this.$Message.error('请求失败'); } }) } }, mounted() { this.getData(); } } </script>浏览器打开URL：:8080/#/table2,渲染效果如下
在前端对用户ID进行倒序排序
在前端对用户状态进行过滤
在前端对用户进行过滤后再对用户ID进行倒序排序
在前端页面进行的每一个分页或过滤操作，都会重新向后端请求数据
5.前端分页并排序及过滤src/views/table3.vue文件内容
<template> <div> <h1>前端分页并排序，过滤</h1> <Table :data="dataWithPage" :columns="column" :loading="loading" border @on-sort-change="handleSortChange" @on-filter-change="handleFilterChange" size="small"></Table> <div> <Page :total="limitData.length" :current.sync="current"></Page> </div> </div> </template> <script> import axios from 'axios' export default { data() { return { total: 0, current: 1, loading: false, sortType: 'normal', // normal || asc || desc filterType: undefined, // undefined,1,2 column: [ { title: "号码", key: 'id', sortable: 'custom' }, { title: "用户名", key: 'name', }, { title: "邮箱", key: 'email', }, { title: "等级", key: 'status', render: (h, {row}) => { if (row.status === 1) { return h('Tag', { props: { color: 'green' } }, "等级 1") } else if (row.status === 2) { return h('Tag', { props: { color: 'red' } }, "等级 2") } else if (row.status === 3) { return h('Tag', { props: { color: 'blue' } }, "等级 3") } }, filters: [ { label: '级别 1', value: 1 }, { label: '级别 2', value: 2 }, { label: '级别 3', value: 3 }, ], filterMultiple: false, filterMethod(value, row) { if (value === 1) { return row.status === 1; } else if (value === 2) { return row.status === 2; } else if (value === 3) { return row.status === 3; } }, filterRemote(value) { this.filterType = value[0]; } } ], data: [] }; }, computed: { limitData() { let data = [...this.data]; if (this.sortType === 'asc') { data = data.sort((a, b) => { return a.number > b.number ? 1 : -1; }) } if (this.sortType === 'desc') { data = data.sort((a, b) => { return a.number < b.number ? 1 : -1; }) } if (this.filterType === 1) { data = data.filter(item => { return item.status === 1; }) } else if (this.filterType === 2) { data = data.filter(item => { return item.status === 2; }) } else if (this.filterType === 3) { data = data.filter(item => { return item.status === 3; }) } return data; }, dataWithPage () { const data = this.limitData; const start = this.current * 10 - 10; const end = start + 10; return [...data].slice(start,end); } }, methods: { getData() { if (this.loading) return; this.loading = true; axios.get(`:8000/get_user/`).then(res => { if(res.data.result) { this.data = res.data.data.list; this.total = res.data.data.total; this.loading = false; } else { this.$Message.error('请求失败'); } }) }, handleSortChange({columns, key, order}) { this.sortType = order; this.current = 1; }, handleFilterChange() { this.current = 1; this.getData(); }, }, mounted() { this.getData(); } } </script>浏览器打开URL：:8080/#/table3，渲染效果如下
进行分页，选择下一页