Vue中BootStrap和分页组件实现分页功能（页码过多时带省略号）

最新推荐文章于 2024-08-16 07:39:33 发布

_夜渐凉

最新推荐文章于 2024-08-16 07:39:33 发布

阅读量8.5k

点赞数 3

分类专栏： ------【Vue】 ------【Bootstrap】文章标签： Vue Bootstrap 分页

本文链接：https://blog.csdn.net/weixin_41888813/article/details/82868525

版权

这篇博客介绍了如何在Vue项目中结合Bootstrap实现分页功能，特别是在页码过多时如何展示省略号。文章提到了可以利用vue分页插件与Spring Data JPA配合，以实现更便捷的分页效果。当不适用vue组件时，博主提供了在vue-cli项目中配置Bootstrap和jQuery的步骤，并展示了新建Vue文件(index.vue)的内容，通过配置路由来运行并完成分页实现。

摘要由CSDN通过智能技术生成

更新：

其实vue中的分页插件结合上 spring data jpa 使用的效果非常好，使用更加方便：

vue组件中：

                <div class="box-footer no-border">
                    <!-- 分页 -->
                    <el-pagination
                        background
                        @size-change="sizeChange"
                        @current-change="pageChange"
                        :current-page="queryForm.page"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="queryForm.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>

在不能使用vue组件，如一般首页是使用element组件的情况：

首先需要在vue-cli项目中配置bootstrap,jquery
然后新建vue文件,如index.vue，index.vue内容如下：
配置路由即可运行实现。

<template>
   <div class="tTable container body-content">
        <div class="form-group">
            <div class="form-group">
                <div class="page-header">
                    表格
                </div>
                <table class="table table-bordered table-responsive table-striped">
                    <thead>
                    <tr>
                    <th>时间</th>
                    <th>点击数</th>
                    <th>点击数</th>