解决vue中el-table翻页序号连续问题

最新推荐文章于 2024-06-14 16:56:53 发布
最新推荐文章于 2024-06-14 16:56:53 发布
阅读量1.4k 收藏 3
点赞数 3
分类专栏： vue 文章标签： 前端 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57484291/article/details/116566172
版权

vue中el-table翻页序号连续问题

         

//template中

 <el-table-column align="center" label="序号" type="index" width="80" :index="table_index"/>

//script中

methods: {
        table_index(index) {
            return (this.searchCourseQueryInfo.page - 1) * this.searchCourseQueryInfo.limit + index + 1
        },

}

 this.searchCourseQueryInfo.page为当前页码，this.searchCourseQueryInfo.limit为每页数据条数

解决问题，记录一下！！

前端大米
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 表格多页的列序号自增
a576837179的博客
05-20 896
<template> <el-table :data="tableData"> <el-table-column type="index" width="50" label="序号" align='center'> <template slot-scope="scope"> <span>{{(pages.page - 1) * pages.size + scope.$index + 1}}</span>
el-table树形表格表单验证(列表生成序号)
10-15
在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格...
vue中el-table翻页序号连续
Timor7hao的专栏
07-23 3616
亲测一个很好的方法，记录一下留用。。。。 template中： <el-table-column type="index" fixed="left" align="center" :index="table_index" //这里绑定一个方法，将返回值赋给index,即表格每行数据的下标 > </el-table-colum...
el-table表格与分页器实现跨页连续计数
最新发布
bbkhhvv的博客
06-14 203
减去1后去乘以要展示的数量。再加上当前索引值加1就可以。
elementui table表格分页后设置序号分页连续
wangaiwen的博客
03-03 372
elementui table表格分页后设置序号分页连续
element：实现el-table表格分页，翻页序号延续上一页
奶绿走糖的博客
06-20 1923
解决el-table表格分页，翻页序号不延续上一页的问题； 方法：通过 Table-column 的 index 属性做自定义索引
使用Element组件中table表格翻页如何让序号延续递增
qq_45000453的博客
10-22 379
在使用Element组件做table表格和加入分页功能之后,在我们表格翻页后表格序号没有延续上一页序号进行递增,如图: 通过Elemen官方文档查询到: 如果设置了type=index，那么可以通过传递index属性来自定义索引 效果如下: ...
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
12-13
最近做的一个项目是基于 vue + AntDesign 的。由于项目要求，需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下： 在线演示地址>>   首先新建一个Table组件的实例： <a> { return ...
el-table的表格序号实现下一页继续累加
qq_39500287的博客
10-24 126
el-table的表格序号实现下一页继续累加
Element-ui的表格table翻页如何让序号延续递增
weixin_57334089的博客
10-21 461
在使用element-ui 的table表格时，都会发现它每一页的序号都会从1开始，那怎么才能让它延续上一页的序号呢？ 研究 element-ui 文档发现table表格属性中有一个index属性 index属性写明了，如果设置了 type=index ，那么可以通过传递 index 属性来自定义索引 <el-table-column label="序号" type="index" :index="getIndex" width="50" /> ...
element-ui表格table翻页如何让序号延续递增
超人不会飞
08-18 2637
在使用element-UI的el-table时，我们添加了type=“index” ，如果设置了 index 则显示该行的索引（从 1 开始计算）。 但是每一页都是从1开始计算。当我们想要切换页码时，希望序号接着上一页的，实现表格翻页序号递增/延续。 下面演示如何实现分页切换时序号递增，代码如下： 结构 <el-table-column label="序号" type="index" :index="indexAdd" width="50" /> js <script> expo
el-table分页后序号连续的两种方法
weixin_43312391的博客
08-15 3052
el-table分页后序号连续的两种方法
atnd a-table列表 分页 前端计算连续的序号
小肉包的博客
04-20 1414
table列表 分页 前端计算连续的序号 如图： 思路： 序号=（当前页码 - 1）* 每页条数 + 索引 + 1 序号 = （pageNum - 1） * pageSize + index + 1
解决jeecgboot分页后表格序号不连续的问题
鬼小生
01-13 1419
jeecgboot最新vue分页之后,换页序号都是从1开始,不符合使用规则. columns:[ { title:'序号', dataIndex:'', key:'rowIndex', width:60, align:"center", ...
Vue+Element实现分页序号自增
文龙刚的博客
10-12 997
第一步：更改模板 <el-table-column type="index" :index="table_index" label="序号" width="50" align="center"></el-table-column> 第二步：在 methods 中添加方法 table_index(index){ return (this.queryInfo.pagenum-1) * this.queryInfo.pagesize + index + 1
vue+element-UI实现分页效果之二 表格多页序号正确自增代码
coldriversnow的专栏
12-30 753
上个文章中 【vue+element-UI实现分页效果】分页序号不递增的问题 修改内容如下，直接上代码 <template> <el-table style="width: 100%;" :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //对数据请求的处理，最为重要的一句话 > <el-t
Vue2 中el-table 翻页序号连续
11-22
为了实现Vue2中el-table翻页时序号连续的效果，可以使用以下步骤： 1.在el-table中添加一列，使用type="index"属性来生成序号列，同时将:index属性绑定到一个变量上，例如table_index。 2.在el-table的@current-change事件中，重新计算序号列的值，使其连续。可以使用以下代码： ```javascript handleCurrentChange(val) { // 计算当前页的第一条数据的序号 let startIndex = (val - 1) * this.pageSize + 1; // 更新序号列的值 this.tableData.forEach((item, index) => { this.$set(item, 'table_index', startIndex + index); }); } ``` 3.在el-table的@row-remove事件中，重新计算序号列的值，使其递补。可以使用以下代码： ```javascript handleRowRemove(row, index) { // 从删除行的下一行开始，更新序号列的值 for (let i = index + 1; i < this.tableData.length; i++) { this.$set(this.tableData[i], 'table_index', this.tableData[i].table_index - 1); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值