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: []