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

前言

分页加表格很常见，基本实现：前台分页和后台分页。这里讲一下如何实现前台分页及搜索功能。基于vue和element和es6的知识，demo详见最后。

正文

• 页面布局
  

<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>

• 绑定数据

data() {
        return {
                list: [],
                data: [],
                limit: 5,
                total: null,
                page: 1,
                searchData: "",
            }
        },

• 获取数据，因为没有后台，就前台模拟取了数据

created() {
            this.pageList()
        },

• 注意： 首次展示数据时，将全部数据暂存保存在this中，方便之后操作，

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()
            },

• 搜索过滤数据，如果搜索过后遇到this.page 变了，但是页面当前页码并没有变的问题，可以参考：解决方法

search() {
       this.page = 1
       this.getList()
   }

demo

<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>