Elementui 分页查询的实现

最新推荐文章于 2024-04-12 17:35:26 发布

滑稽的

最新推荐文章于 2024-04-12 17:35:26 发布

阅读量1.6k

点赞数

文章标签： html java

whqbg

本文链接：https://blog.csdn.net/HeiYanMin/article/details/104997864

版权

Elementui 分页查询的实现

首先确定，数据库分页查询代码（以MySql数据库为例）

SELECT * FROM user LIMIT #{beginNum},#{everyPage}
beginNum：从哪个值开始，一般数据库表第一个值的位置序号为0，从0开始往下查
everyPage：每页多少个数据

所以我们确定了，数据库需要的两个数据。我们从前端往后面传值的时候，往往选择传送的两个值是(1)当前页数（pageCode），(2)每页的数据总量（pageSize），所以我们需要计算一下数据库需要的数据。
```
		int beginNum = 0;     /*因为传来的当前页可能为0，所以要判断一下*/
        if (nowPage != 0){
            beginNum = (nowPage - 1) * pageSize;
        }
```

现在可以编写后端代码了，因为我还做了一个查询数据总量，不需要的同学可以不用做。且我用的是IDEA做的springboot项目，我直接放代码了(不太重要的就不放了)。

先编写 mapper 文件以及 mapper.xml 文件

mapper文件:
/**
     * 查询user表总记录数
     * @return
     */
    int selectUserCounts();

    /**
     * 分页查询用户
     * @param map
     * @return
     */
    List<User> selectUserList(Map<String,Object> map);

mapper.xml文件
    <!--查询user表总记录数-->
  <select id="selectUserCounts" resultType="int">
    select count(*) from user
  </select>
  <!--分页查询用户-->
    <select id="selectUserList" parameterType="map" resultMap="BaseResultMap">
    SELECT * FROM user LIMIT #{beginNum},#{everyPage}
  </select>

编写service 文件

@Service
public class UserServices {
    @Autowired
    private UserMapper userMapper;
    /**
     * 分页查询用户
     * @param nowPage 当前第几页
     * @param pageSize  每页多少数据
     * @return
     */
    public Map<String,Object> queryUserList(int nowPage,int pageSize){
        /*查询总记录数*/
        int totalRecord = userMapper.selectUserCounts();
        int beginNum = 0;
        if (nowPage != 0){
            beginNum = (nowPage - 1) * pageSize;
        }
        Map<String,Object> queryMap = new HashMap<>();
        queryMap.put("beginNum",beginNum);
        queryMap.put("everyPage",pageSize);

        List<User> queryUserList = userMapper.selectUserList(queryMap);
        Map<String,Object> outMap = new HashMap<>();
        outMap.put("total",totalRecord);
        outMap.put("list",queryUserList);
        return  outMap;
    }
}

编写controller文件

@RestController    /* 使返回的数据转为 json 格式的数据 */
@RequestMapping("/user")
public class UserinfoController {
    @Autowired
    private UserServices userServices;
    /**
     * 分页查询用户
     * @param queryMap
     * @return
     */
    @RequestMapping("/queryUserListt")
    public Map<String,Object> queryUserList(@RequestBody Map<String,Object> queryMap){
        int nowPage = Integer.parseInt(queryMap.get("pageCode").toString());
        int pageSize = Integer.parseInt(queryMap.get("pageSize").toString());
        return userServices.queryUserList(nowPage,pageSize);
    }
}

现在再来看前端代码，注意：我的分页已经做了封装了，封装成组件了，不过大意还是一样的

现将组件导入，注册

<script>
    import Paginate from '~/components/Pagination/Paginate.vue'; /*导入，注意不啊哟丢了分号 ;  */
    export default {
        components: {
        Paginate          /*注册组件，局部注册*/
        },
    }
</script>

在table下，放下该组件

  <el-table :data="userList" border ref="table" style="width: 100%">
     <!-- 此处改为你的table表格，我为了简单明了直接省略了-->      
  </el-table>
        <Paginate                <!-- 这就是那个分页组件-->    
                api="queryUserList"    <!-- 接口路径--> 
                :params="params"        <!--往后端传送的主体--> 
                :refresh="refresh"               <!--用于搜索--> 
                @val-change="changeUserList">      <!--自定义方法使得得到userlist-->
        </Paginate>

现在我要放我的完整的 html代码了

<template>
    <div class="user-list">
        <ToolBar>
            <!--  <el-button type="primary" icon="el-icon-plus" size="small" @click="editUser(false)">添加</el-button>-->
            <div style="float: right">
                <el-input
                        placeholder="请输入用户昵称！"
                        size="small"
                        style="width: 140px"
                        v-model="params.username"

                        clearable>
                </el-input>
                <el-button  type="success" icon="el-icon-search" size="small"></el-button>
            </div>
        </ToolBar>
        <el-table
                :data="userList"
                border
                ref="table"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="66"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="用户id">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户昵称">
            </el-table-column>
            <el-table-column
                    prop="emaill"
                    label="邮箱">
            </el-table-column>
            <el-table-column
                    prop="realname"
                    label="真实姓名">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    width="66"
                    label="性别">
               <!-- <div slot-scope="scope" style="width: 100%;text-align: center">{{ $Config.sex[scope.row.sex] }}</div>-->
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="用户类型">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button @click="resetting(scope.row.id)" type="warning" style="transition: .4s;"  :ref="scope.row.id"  icon="el-icon-refresh" size="small" circle></el-button>
                    <el-button @click="editUser(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
                    <el-button @click="deleteUser(scope.row.id)"  type="danger" icon="el-icon-delete" circle size="small"></el-button>
                    <!--<el-button @click="deleteUser(scope.row.id)" v-else icon="el-icon-check" circle size="small"></el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <Paginate
                api="queryUserList"
                :params="params"
                :refresh="refresh"
                @val-change="changeUserList">      <!--自定义方法使得得到userlist-->
        </Paginate>

    </div>
</template>

<script>
    import ToolBar from '~/components/ToolBar/ToolBar.vue';
    import HelpHint from '~/components/HelpHint/HelpHint.vue';
    import Paginate from '~/components/Pagination/Paginate.vue';

    export default {
        data() {
            return {
                params: {
                    username: '',
                },
                refresh: true,
                userList: [
                    {id:1,username:'Admin',emaill:'1@qq.com',realname:'张三',sex:'男',state:'正常',status:'超级管理员'}
                ]
            }
        },
        components: {
            ToolBar, HelpHint,Paginate
        },
        methods: {
            changeUserList(userList){
                this.userList = userList;
            }
        }
    }
</script>
<style lang="less">

</style>

这是我的分页组件

<!--
如何使用？
1.导入并添加components, import ToolBar from '~/components/ToolBar/ToolBar.vue',
2.绑定你的api、参数和数据处理函数，会自动生成分页
<Paginate
    api="postList"         提供接口
    :params="params"       实现按需跳转，与后端传值
    :refresh="refresh"      用于搜索
    @val-change="PaginateData"   自定义事件，
    >
</Paginate>
3.当你再次改动参数时，执行 refresh=!refresh 即可刷新。用于搜索。

-->

<template>
  <div class="pagination">
    <div class="total">本页共有{{currentDataLength}}条数据</div>
    <!--
    1.@size-change:作用，当每页的数据量变化时，该事件被触发，即：pageSize 改变时
    2.layout="total, sizes, prev, pager, next, jumper"：作用，total，意思是显示数据总量；sizes：显示当前页数据量的最大值；
    prev：向前翻页的图标；pager：当前页；next：向后翻页的图标；jumper：跳转到那页
    3.:page-sizes ：作用，给定几个每页多少数据
    4. :page-size ： 作用，确定当前页数据量初始值
    5. @current-change：作用，当前页数的改变会被触发，即 currentPage 改变时会触发，
    6. :total：作用，确定数据总量
    -->
    <el-pagination
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            @current-change="change"
            :total="total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    name: 'Paginate',
    props: {                   /*用来接收父组件的返回的数据*/
      api: String,
      params: Object,
      refresh: Boolean,
    },
    data() {
      return {
        total: 0,                      /*总共多少数据*/
        current: 0,                   /*从第几页开始*/
        currentDataLength: 0,         /*当前页有多少数据*/
        pageSize: 5 ,                 /* 每页多少数据 */
        pageSizes:[5, 10, 15, 20]
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;        /*当前页数据量变动时，绑定给pageSize,实现实时的更新表格*/
        this.paginate();
      },
      paginate: function () {
        let thisApp = this;
        let params = thisApp.params;
        params.pageSize = thisApp.pageSize
        params.pageCode = thisApp.current;

        thisApp.$Api[thisApp.api](params, function (data) {
          thisApp.total = data.total;                               /*接收从后端返回的总记录数*/
          thisApp.currentDataLength = (data.list).length          /*接收从后端返回的数据的长度*/
          thisApp.$emit('val-change', data.list);               /*使用 $emit 触发父组件的自定义事件，将从后端返回的用户数据布置到前端*/
        })
      },
      change: function (page) {    /*改变页数，实现分页*/
        this.current = page;
        this.paginate();
      }
    },
    mounted: function () { /*页面加载的时候运行*/
      this.paginate();
    },
    watch: {        /*监听功能*/
      'refresh': {
        handler: function () {
          this.current = 0;
          this.paginate();
        },
        // 深度观察
        deep: true
      }
    },

  }
</script>
<style lang="less" scoped>
  .pagination {
    padding: 7px;
    border: 1px solid #ebeef5;
    background: #fff;
    text-align: right;
  }
  .total {
    float: left;
    margin-top: 8px;
    margin-left: 10px;
    font-size: 13px;
    color: #606266;
  }
</style>

大功告成！！！

小小收藏,elementui中，分页的参数与事件小结

1.@size-change:作用，当每页的数据量变化时，该事件被触发，即：pageSize 改变时
2.layout="total, sizes, prev, pager, next, jumper"：作用，total，意思是显示数据总  量；sizes：显示当前页数据量的最大值；
prev：向前翻页的图标；pager：当前页；next：向后翻页的图标；jumper：跳转到那页
3.:page-sizes ：作用，给定几个每页多少数据
4. :page-size ： 作用，确定当前页数据量初始值
5. @current-change：作用，当前页数的改变会被触发，即 currentPage 改变时会触发，
6. :total：作用，确定数据总量