Vue使用Element组件实现Pagination 分页

原创已于 2022-08-15 15:19:21 修改 · 799 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-01 21:40:57 首次发布

Vue 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中实现分页和搜索功能。通过引入组件`Pagination`并设置相关参数，实现了数据列表的分页展示。同时，结合`el-input`和`el-button`组件，创建了搜索框，点击搜索按钮即可触发`getData`方法获取过滤后的数据。后端使用`CustomerList`函数处理请求，返回分页和搜索条件下的客户数据。

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>