vue+elementui项目后端分页，分页页码参数从0开始如何处理 - 个人笔记

最新推荐文章于 2024-05-06 16:59:03 发布

公孙元二

最新推荐文章于 2024-05-06 16:59:03 发布

阅读量1.3k

点赞数

分类专栏： Vue2.x 个人笔记/备忘录文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/Amnesiac666/article/details/120197727

版权

Vue2.x 同时被 2 个专栏收录

166 篇文章 9 订阅

订阅专栏

个人笔记/备忘录

104 篇文章 4 订阅

订阅专栏

初始时size设置为1，因为el-pagination是从1开始，如果从0开始，el-pagination会显示不正常

  data() {
    return {
      searchForm: {
        page: 1,
        size: 10
      },

el-table的序号显示，因为page从1开始所以减去1

 <el-table-column type="index" label="序号" align="center" :index="(index) => { return (index+1) + (searchForm.page-1)*searchForm.size }" />

因为前端page初始化时是1，而后端接口参数需要从0开始，所以传参的时候要减1

    // 获取页面表格
    getTableData: function() {
      const params = Object.assign({}, this.searchForm)
      params.page = params.page - 1

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

公孙元二

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

elementui el-table表格实现跨页(翻页)保存勾选状态(后端分页)_el-table翻页保留勾选

m0_61043185的博客

04-21

2296

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！

【Vue项目心得笔记】页面的分页功能

qiaoyangla的博客

04-25

1141

1、为什么很多项目采用分页功能，比如电商平台同时展示的数据有很多，如果不采用分页功能可能浏览器加载不出来。ElementUI有相应的分页组件，使用起来超级简单，但是我们先掌握自定义分页的功能。 2、分页器需要哪些数据？（1）当前是第几页：pageNo字段代表当前页数（2）每页展示多少数据：pageSize字段代表（3）需要知道整个分页器一共有多少个数据：total字段代表（4）需要分页器连续页面个数：5/7【奇数】奇数是对称的总结： pageNo：代表每一页展示多少数据 page

参与评论您还未登录，请先登录后发表或查看评论

element表格翻页第2页从1开始编号(后端从0开始分页)

10-15

主要介绍了element表格翻页第2页从1开始编号(后端从0开始分页)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

element ui分页怎么做_element ui里面table分页,页数从0开始的怎么做？

weixin_31969181的博客

02-15

307

需求:后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转01首先在data里面定义为1,其他地方也是定义1return {formSearch: {name: '',phone: '',page: 1,size: 10}}2.在接口这里去重新创建一个对象,进行浅拷贝getSalesList () {this.loading = tru...

el-pagination 后端接口分页页数从0开始

树上骑个猴的博客

07-05

1107

<el-pagination background layout="total, prev, pager, next" :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchForm.size" :total="total" @size-change="handleSizeC.

element ui里面table分页,页数从0开始的怎么做？

weixin_30321449的博客

04-09

944

需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { formSearch: { name: '', phone: '', page: 1, size: 10 } } 2...

vue + element Table的数据多选，多页选择数据回显，分页记录保存选中的数据。

最新发布

2301_79098879的博客

05-06

998

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

Vue懒加载的使用(后端分页)

radcb55226的博客

04-20

575

如果是使用cdn的形式也是一样，引入了这个插件之后要再挂载在Vue实例上，挂载时还可以设置一些常用的参数error表示的是当图片加载失败时会使用的图片地址loading表示的是图片处在加载状态时会显示的图片attempt表示图片会加载的次数（当加载失败以后会继续加载的次数）当配置好了这个之后，就可以在页面中使用了，原来图片的连接时写在src下，现在写在v-lazy里面即可。

Vue + Element + Table 分页选择勾选和取消勾选的问题

huihuiliu_的博客

07-31

6407

Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述：需求是这样的===》表格前面每条数据都有复选框吧然后表格有很多页，我从第一页选取N条数据再去其他页选取M条数据同时对选中的这M+N条数据进行一系列操作（如：批量删除、添加、修改等等吧，按自己需求来）但是发现在第一页选取数据之后再去其他页再去选取数据然后回到第一页第一页选取的数据已经不是勾选状态了这样就不符合我的需求了就是切换页码在回到之前之前的选中状态已经清除了

el-pagination遇到pageNum从0开始给后台传值问题

weixin_46421824的博客

01-12

547

话不多说上代码 data() { return { group: { page: 1, pageSize: 10 }, // 分组分页 groupTotal: 0 } } getGroupTalkList() { const vm = this const params = Object.assign({}, this.group) this.$axios({ url: 'url',

vue 翻页每次从1开始_element表格翻页第2页从1开始编号(后端从0开始分页)

weixin_36439236的博客

12-29

904

项目中常见的分页显示，第二页从1开始编号，然后在切换分页的过程中，偶现不对，都是小问题，整理记录一下，供参考。template：...type="index"label="编号":index="getIndex"width="80px">...:total="total":pageSize="pageSize":currentPage="currentPage"@sizeChange="si...

ElementUI Pagination 分页组件

weixin_74285634的博客

07-12

385

【代码】2-1、分页静态搭建及渲染数据。2-1、首先获取到服务器数据。

从0到1完成一个Vue后台管理项目（十一、前端分页实现）

随便写写

01-09

761

先用vue2+elementui从0搭建一个vue后台管理项目，完成后会迭代成vue3+TS+element-plus

element-ui 分页pagination组件动态设置默认页码

weixin_45832746的博客

07-26

681

【代码】element-ui 分页pagination组件动态设置默认页码。

vue 翻页每次从1开始_vue实现分页

weixin_39673947的博客

12-29

324

效果图：html页面：data数据：方法：计算属性：样式：html代码：上一页上一页{{ index }}下一页下一页共{{all}}页===========================================================================js代码：data () {return {all: 10, //总页数cur: 1,//当前页码totalPag...

从零开始实现一个简单的分页

chengyunyi的专栏

12-28

1471

前言分页技术就是JSP页面用来显示数据。如果有100条数据，分页显示，每页显示10条，总共有10页；好处就是利于页面布局，且显示效率高。分页关键点1. 分页的SQL语句 //admin被分页的表，limit两个参数控制起始和终止页 select * from admin limit 0,4; 2. 后台处理： dao/service/servlet/jsp实现步骤：一. 环

vue-admin-element从0到1快速开发成型到上线

一个有思想的新时代农民工的博客

04-02

552

1.登陆在login文件下的index.vue（接口在store文件下modules/user.js）（登陆页面如果接口成功但进不去页面则需要看一下store/modules/pemission.js的 getUserPowers方法，看这里的返回值是不是正确的） 2.获取用户信息根据getInfo接口后台返回的信息（接口在store文件下modules/user.js） ...

java分页第0页表示_element表格第2页从1开始编号，后端从0开始分页

weixin_29962351的博客

02-25

828

springboot+vue+elementui表格显示后端图片

09-05

在Spring Boot中使用Vue和Element UI来显示后端图片，可以按照以下步骤进行操作： 1. 在Spring Boot项目中，创建一个用于存储图片的文件夹，比如将其命名为"images"。 2. 将需要显示的图片上传到该文件夹中。 3. 在后端编写一个Controller，用于处理图片请求。可以添加一个接口，比如"/api/image/{imageName}"，用于获取某个特定图片的路径。 ```java @RestController @RequestMapping("/api/image") public class ImageController { @Value("${image.path}") private String imagePath; @GetMapping("/{imageName}") public void getImage(@PathVariable String imageName, HttpServletResponse response) throws IOException { File file = new File(imagePath + "/" + imageName); FileInputStream fis = new FileInputStream(file); IOUtils.copy(fis, response.getOutputStream()); } } ``` 配置文件中的image.path属性需要指向存放图片的文件夹路径。 4. 在Vue中，使用Element UI的表格组件来显示图片。首先在Vue组件中定义一个data属性，用于保存图片数据。 ```javascript data() { return { imageUrl: '/api/image/' tableData: [] }; } ``` "imageUrl"属性用于指定获取图片的接口路径。 5. 从后端获取图片数据，在Vue组件的"mounted"生命周期中发起一个请求，获取后端返回的图片数据，并将其赋值给表格的数据属性。 ```javascript mounted() { axios.get('/api/imageData') .then(response => { let data = response.data; // 对返回的data进行处理，将图片路径拼接上指定的路径 data.forEach(item => { item.imageUrl = this.imageUrl + item.imageName; }); this.tableData = data; }) .catch(error => { console.error('Error:', error); }); } ``` 6. 在表格的列定义中，使用Element UI的"el-table-column"组件来显示图片。 ```html <el-table-column prop="imageUrl" label="图片"> <template slot-scope="scope"> <img :src="scope.row.imageUrl" width="100" height="100"> </template> </el-table-column> ``` 通过以上的步骤，就可以在Spring Boot中使用Vue和Element UI来显示后端图片了。在表格中的图片列中，会显示相应的图片。