element-ui 带序号表格如何让序号递增

在使用element-UI的el-table时，我们添加了type=“index” ，如果设置了 index 则显示该行的索引（从 1 开始计算）。
但是每一页都是从1开始计算。当我们想要切换页码时，希望序号接着上一页的，实现表格翻页序号递增/延续。
原来效果:

下面演示如何实现分页切换时序号递增，代码如下：

<template><div><el--card><!-- type:index会自动生成序号 --><el-table-columnlabel="序号"type="index":index="indexAdd"width="50"/></el-card>    </div>
</template><script>export default {data() {return {// 实现分页pageParams: {page: 1, // 查询第一页pagesize: 2 // 每页两条  --- 要与pagination中page-size一致},total: 0 // 总的数据条数}},methods: {// type序号 - 页面切换递增indexAdd(index) {// console.log(index, 222222)const page = this.pageParams.page // 当前页码const pagesize = this.pageParams.pagesize // 每页条数return index + 1 + (page - 1) * pagesize}}}
</script>

实现后效果:

element-ui 带序号表格如何让序号递增相关推荐

element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
Element ui中el-table表格如何实现加一列序号（从1开始排）
需要在<el-table>标签紧后方加上<el-table-column type="index" width="60" label=&quo ...
php 表格序号,表格如何插入序号？
方法:1.打开excel表格:2.选中一列,在前两个单元格中分别输入"1"."2":3.把鼠标放在"2"单元格的右下角:4.当鼠标光标变成& ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）
效果预览实现思路 data中定义 selectedList 数组保存选中的数据在页面初次渲染.翻页.切换每页数据数量等每次重新获取表格数据渲染表格时,都根据 selectedList 勾选表格中已 ...

element-ui 带序号表格如何让序号递增

element-ui 带序号表格如何让序号递增相关推荐

最新文章

热门文章