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

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

整体样式：

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

1、导入ElementUI组件库：

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

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

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

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

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

下载后导入两个js文件：

<!--导入发送请求的js文件-->
<script src="page/axios-0.18.0.js"></script>
<!--导入vue.js文件-->
<script src="page/vue.js"></script>

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

ElementUI官网地址。

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

<!--    表格组件-->
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"   //处理颜色的
            @selection-change="handleSelectionChange" //处理复选框选中了的元素
    >
        <el-table-column
                type="selection"
        ></el-table-column>
        <!--索引-->
        <el-table-column
                align="center"
                type="index"
                :index="indexMethod"  //序号部分，不写这个函数每页都是从1开始的序号
                label="序号">
        </el-table-column>

        <el-table-column
                align="center"
                prop="brandName"
                label="品牌名称">
        </el-table-column>
        <el-table-column
                align="center"
                prop="companyName"
                label="公司名称">
        </el-table-column>
        <el-table-column
                align="center"
                prop="orders"
                label="排序">
        </el-table-column>
        <el-table-column
                align="center"
                prop="statu"
                label="当前状态">
        </el-table-column>
        <el-table-column
                align="center"
                label="操作">
            //这两个功能暂未实现
            <el-button type="primary">修改</el-button>
            <el-button type="danger">删除</el-button>
        </el-table-column>
    </el-table>

三、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<HashMap> 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 id="searchInfo" resultType="java.util.HashMap">
        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
        <where>
            <if test="brandName!=null and brandName!=''">
                and b.brand_name like #{brandName}
            </if>

            <if test="companyName!=null and companyName!=''">
                and b.company_name like #{companyName}
            </if>

            <if test="status!=null">
                and b.status = #{status}
            </if>
        </where>
        limit #{start},#{size};
    </select>

    <select id="searchCondationCnt" resultType="java.lang.Long">
        select count(*)
        from tb_brand b
        <where>
            <if test="brandName!=null and brandName!=''">
                and b.brand_name like #{brandName}
            </if>

            <if test="companyName!=null and companyName!=''">
                and b.company_name like #{companyName}
            </if>

            <if test="status!=null">
                and b.status = #{status}
            </if>
        </where>
    </select>