ElementUI如何实现分页查询？html如何实现分页查询？vue如何实现分页查询？

本文采用的vue+elementUI+axios发送请求+SptingBoot搭建后台

整体样式：

一、导入ElementUI组件库，以及VUE.js和axios文件：

1、导入ElementUI组件库：

只需要在html标签中写两个导入标签即可：

2、导入VUE.js和axios文件：

如果没有的话可以在下面的网盘下载。

 https://pan.baidu.com/s/1seCfwBByh1P9nOCiSjVijQ?pwd=6cq7    提取码: 6cq7

下载后导入两个js文件：

二、在ElementUI官网找到分页组件：

ElementUI官网地址。

找到我们要使用的那个组件将HTML部分复制过来。(下面一些注释，自己删除就好)

    
        
        
        
        

        
        
        
        
        
        
        
        
        
            //这两个功能暂未实现
            修改
            删除
        
    

三、VUEjs部分：

注意：

1、每次点击每页显示多少条要进行一次列表更新

2、点击页码时要进行一次页码更新

      new Vue({
        el: "#app",
        //页面加载完成之后执行的逻辑
        mounted() {
            //初始化第一个页面的数据
            this.updateCurrentData(1, this.currentSize)
        },
         methods: {
            //(el自带函数)
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            //复选框选中之后执行的逻辑
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //更新当前页码的数据： 向后台获取数据的逻辑
            updateCurrentData(start, length) {
                let that = this;
                let data = {
                    status: this.searchForm.status === "启用" ? 1 : this.searchForm.status === "禁用"?0:'',
                    companyName: this.searchForm.companyName,
                    brandName: this.searchForm.brandName,
                    start:start,
                    size:length
                }
                axios({
                    method: "POST",
                    url: 'http://127.0.0.1:8080/study/vueElement/searchInfo',
                    data:data
                }).then(function (resp) {
                    that.tableData = resp.data.pageData.form; //将返回的表单数据赋值
                    that.totalSize = resp.data.pageData.size;
                })
            },
            //每页显示多少条数据
            handleSizeChange(val) {
                this.currentSize = val;
                this.updateCurrentData(this.currentPage, this.currentSize);
            },
            //当前在第几页
            handleCurrentChange(val) {
                this.currentPage = val;
                this.updateCurrentData(this.currentPage, this.currentSize);
            },
            //更新每一页的序号索引
            indexMethod(index) {
                return (this.currentPage - 1) * this.currentSize + index + 1;
            },
        }，
        data() {
            return {
                //搜索的表单
                searchForm: {
                    status: '',
                    companyName: '',
                    brandName: '',
                    start:1,
                    size:5
                },
                multipleSelection: [],//多选框选了什么
                currentPage: 1,//当前页码
                currentSize: 5,//默认每页展示5条数据
                totalSize: 0,//共多少条信息
                tableData: [] //当前页的表单数据
            }
        }
    }

四）后台SpringBoot：

1、分页查询时前端传来的是start和size，写SQL时候start要进行一次修改，start=(start-1）*size

controller类：

@RestController
@RequestMapping("/vueElement")
@Tag(name = "vue-element学习")
@CrossOrigin()//加上这个注解。否则前台发送请求之后无法访问
public class VueElement {

    @Autowired
    private vueElementImpl vueElementService;

    @PostMapping("/searchInfo")
    @Operation(summary = "条件查询")
    public R searchInfo(@RequestBody searchForm form){
        pageReturn list = vueElementService.searchInfo(form);
        return new R().put("pageData",list);
    }
}

service类：

    @Override
    public pageReturn searchInfo(searchForm form) {
        //处理分页数据：
        form.setStart((form.getStart()-1)*form.getSize());
        //设置模糊查询字符串
        if(form.getBrandName()!="" && form.getBrandName()!=null)
            form.setBrandName("%"+form.getBrandName()+"%");
        if(form.getCompanyName()!="" && form.getCompanyName()!=null)
            form.setCompanyName("%"+form.getCompanyName()+"%");

        ArrayList list =  brandDao.searchInfo(form.getBrandName(),form.getCompanyName(),form.getStatus(),form.getStart(),form.getSize());

        Long cnt = brandDao.searchCondationCnt(form.getBrandName(),form.getCompanyName(),form.getStatus());

        pageReturn page = new pageReturn();
        page.setSize(cnt);
        page.setForm(list);

        return page;
    }

MyBatis部分：

    
        select
        b.id,
        b.brand_name                 as brandName,
        b.company_name               as companyName,
        b.ordered                    as orders,
        if(b.status = 1, "启用", "禁用") as statu
        from tb_brand b
        
            
                and b.brand_name like #{brandName}
            

            
                and b.company_name like #{companyName}
            

            
                and b.status = #{status}
            
        
        limit #{start},#{size};
    

    
        select count(*)
        from tb_brand b
        
            
                and b.brand_name like #{brandName}
            

            
                and b.company_name like #{companyName}
            

            
                and b.status = #{status}