vue+element实现前端逻辑分页及前端搜索功能

后端一次获取数据前端分页

<template>
    <div>
        <el-row>
            <el-col :span="6">
               <el-input v-model="searchData"  placeholder="输入姓名搜索"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="success" @click="search">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="list">
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
<script>
    var listJson = {
        list: [
            { name: 'aa', age: 12 },
            { name: 'bb', age: 13 },
            { name: 'cc', age: 14 },
            { name: 'ad', age: 15 },
            { name: 'eaae', age: 16 },
            { name: 'faaf', age: 16 },
            { name: 'hah', age: 17 },
            { name: 'ii', age: 18 },
            { name: 'rar', age: 19 },
            { name: 'dd', age: 10 },
        ]
    }
    export default {
        data() {
            return {
                list: [],
                data: [],
                limit: 5,
                total: null,
                page: 1,
                searchData: "",
            }
        },
       created() {
            this.pageList()
        },
        methods: {
            pageList() {
                // 发请求拿到数据并暂存全部数据,方便之后操作
                this.data = listJson.list
                this.getList()
            },
            // 处理数据
            getList() {
                // es6过滤得到满足搜索条件的展示数据list
                let list = this.data.filter((item, index) =>
                    item.name.includes(this.searchData)
                )
                this.list = list.filter((item, index) =>
                    index < this.page * this.limit && index >= this.limit * (this.page - 1)
                )
                this.total = list.length
            },
            // 当每页数量改变
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.limit = val
                this.getList()
            },
            // 当当前页改变
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                this.getList()
            },
            // 搜索过滤数据
            search() {
                this.page = 1
                this.getList()
            }
        },
    }
</script>

bug：vue和element实现的后台分页，当前是第二页，点击搜索，强制设置current-page为1，但是当前页还是第二页没有改变

解决方案：

• 页面 el-pagination v-if="pageshow"

 <el-pagination 
            v-if="pageshow" 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange"
            :current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>

• 操作
  这里element的分页有个bug，就是在搜索过后的当前页数据变化了，原本的分页当前页并不会改变，这就会遇见一个问题，首次展示停留在第5页，搜索过后的数据并没有5页，不论前台分页或后台分页，页面都会展示：暂无数据！ 但其实是有数据的，只是额没有第五页的数据。所以在搜索的时候将当前页设置为1。

• 使用v-if绑定数据，当每次搜索的时候就注销掉前一个分页Dom，画面刷新完毕后，渲染一个同样的分页，重新渲染必须放到$nextTick中，这样在使用分页就不会出现问题了。

• search是一个方法在methods中，调用的时候@click="search"绑定到 搜索按钮上 就可以了

            search() {
                this.page = 1
                this.pageshow = false
                this.getList()
                this.$nextTick(() => {
                    this.pageshow = true
                })
            }