vue+element实现分页及条件搜索功能(纯前端分页)

		   学习vue+element做用户条件分页查询遇到的坑

html页面主要代码：
ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现)

<div id="user">
1. <el-table
    :data="userInfo.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    style="width: 100%">
<el-table-column
        label="用户名"
        prop="userName">
</el-table-column>
<el-table-column align="right">
    <template slot="header" slot-scope="scope">
        <el-row>
            <el-col :span="19">
                <el-input v-model="search" placeholder="输入姓名搜索"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="success" @click="searchData">搜索</el-button>
            </el-col>
        </el-row>
    </template>
    <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row, 'upd')">编辑
        </el-button>
        <el-button
                slot="reference"
                size="mini"
                type="danger"
                @click="handleEdit(scope.$index, scope.row , 'del')">删除
        </el-button>
    </template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="[5, 10, 20, 50]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="totalNum">
</el-pagination>
</div>

页面主要注意部分：

⑴:data="userInfo.slice((currentPage1)*pageSize,currentPage*pageSize"
⑵<el-pagination @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="[5, 10, 20, 50]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="totalNum">
</el-pagination>

---

js主要代码：

new Vue({
    el: '#user',
    data: {
        form: {
            name: '',
            password: '',
        },
        list: [],
        userInfo: [],
        search: '',
        currentPage: 1,
        pageSize: 5,
        totalNum: 100,
    },
    created() {
        console.log("初始化...");
        this.getUserInfo();
    },
    methods: {
        //页码首次加载进行列表展示
        getUserInfo() {
            axios.get('http://localhost:8081/note/auth/getUsers'
            ).then((res) => {
                console.log(res.data.data);
				//后台返回结果对象赋值userinfo
                this.userInfo = res.data.data;
                //实现分页逻辑
				this.getList();
            }).catch(function (error) {
                console.log(error);
                this.$message.error('获取用户信息失败');
            });
        },
		//调用同步方法，后面解释
        async getUserInfoTmp() {
            return await axios.get('http://localhost:8081/note/auth/getUsers'
            ).then((res) => {
                console.log(res.data.data);
                this.userInfo = res.data.data;
            }).catch(function (error) {
                console.log(error);
                this.$message.error('获取用户信息失败');
            });
        },
		//该方法也相应改为同步，否则this.getUserInfoTmp()会有错误提示。
        async getList() {
            //条件查询时先获取全部信息
            await this.getUserInfoTmp();
            console.log('this.userInfo总记录数为='+this.userInfo);
            //前端过滤条件查询信息
            let list = this.userInfo.filter(data => !this.search || data.userName.toLowerCase().includes(this.search.toLowerCase()));
            console.log('list条件查询后为='+list);
            //二次赋值
            this.userInfo = list;
            console.log('this.userInfo最终赋值为='+this.userInfo);
            list.filter((item, index) => index < this.currentPage * this.pageSize && index >= this.pageSize * (this.currentPage - 1));
            this.totalNum = list.length
        },
        handleSizeChange(val) {
            console.log('每页'+val+'条');
            this.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log('当前页:'+val);
            this.currentPage = val;
            this.getList();
        },
		//搜索方法
        searchData() {
            this.currentPage = 1;
            this.getList();
        }
    }
});

以上就是纯前端实现分页功能，后台就通用一个用户全部信息查询方法。
条件查询实现思路：
1、先进行全部信息查询
2、前端进行条件过滤查询
3、将过滤的对象直接赋值给table :data.整个对象
该过程中遇到的难点：
this.userInfo = list;赋值成功，页面显示失败！
控制台日志：
this.userInfo总记录数为=[Object Object]，[Object Object]，[Object Object]，[Object Object]，[Object Object]，[Object Object]
list条件查询后为=[Object Object]，[Object Object]
this.userInfo最终赋值为=[Object Object]，[Object Object]

该方法async getList()首先会调用await this.getUserInfoTmp()方法。
await this.getUserInfoTmp()里面获取到所有的用户信息进行userinfo赋值：this.userInfo = res.data.data; 然后代码继续往下走，条件过滤后this.userInfo = list;二次赋值。但是最后页面始终显示六条全部的数据，并非list的两条数据。(就最后一步页面数据显示问题害的我搞到凌晨4点，网上搜了各种方法，set/splice等等，全部都不行~~！最后放弃先睡觉了)

一觉睡起来，我只好找好兄弟“呆子”进行请教，他看了我的代码先骂了一顿，格式问题严重，效率低下等，哈哈~ 最后他看了大概20分钟就分析说道：逻辑看起来没有问题，axios默认异步处理，尽管先执行的this.getUserInfoTmp()方法赋值全部数据，后面在赋值list数据，但是跟踪发现异步加载其实慢于list赋值的代码表面顺序逻辑。固这快的异步方法需要改成同步 await this.getUserInfoTmp()；
同步方法是后面加上去的。后面经过测试确实如此。MD只怪自己太不开窍，真是搞死我了~
今天又试了后台逻辑：条件查询时直接调用后台查询接口(参数进行分支处理，空时查全部，非空走条件查)，查出来什么赋值什么。
最后发现还是得用同步处理，因此最终全部使用前端逻辑，后台逻辑暂时搁置。

async getList() {
   let url = 'http://localhost:8081/note/auth/getUserWithParam';
   url += '?userName=' + this.search;
   await axios.get(url).then((res) => {
       this.userInfo = res.data.data;
   }).catch(function (error) {
       this.$message.error('获取用户信息失败');
   });
   this.userInfo.filter((item, index) => index < this.currentPage * this.pageSize && index >= this.pageSize * (this.currentPage - 1));
   this.totalNum = this.userInfo.length
},

最后：再次感谢“呆子”~~

附 ：功能参考该文章：[https://blog.csdn.net/weixin_43216105/article/details/90043828#comments]