Vue使用Element组件实现Pagination 分页

1.组件引入

 <div>
        <pagination v-show="total>0" :page-sizes="[3,5,7]" :total="total" :page.sync="quere.page" :limit.sync="quere.limit"  @pagination="getData" />
    </div>

import Pagination from '@/components/Pagination'

components:{ Pagination },

3.参数

    DataList:[],
      total:0,
      quere:{
        page:1,
        limit:3,
        input:'',
      },

4.发起请求

 getData(){
       CustomerList( this.quere).then((response) => {
          console.log(response)
          this.total = response.data.total
          this.DataList = response.data.data
        })
    },

5.调取后端代码

export function CustomerList(data) {
    return request({
    url:'/customer/CustomerList',
    method: 'get',
    params:data
    })
  }

6.调用数据返回

    public function CustomerList($input,$limit,$page)
    {
        $where = [];
        if (!empty($input)){
            $where[] = [
                'name','like',"%$input%"
            ];
        }
        $data = Customer::where($where)->paginate($limit)->toArray();
        return success('查询成功',$data);
    }

 搜索分页

        <div style="width: 300px;float: left">
          <!-- 搜索 -->
          <el-input v-model="quere.input" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
          </el-input>
        </div>