element el-table 添加分页连接的序号,清除sortable排序
先看代码:
<el-table :data="tableData" style="width: 100%" stripe size="medium" @sort-change="changeSort">
<el-table-column label="序号" width="80">
<!-- 这是添加分页时有连接的序号 -->
<template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) *size + 1}} </span></template>
</el-table-column>
<!-- 这是添加排序 -->
<el-table-column prop="date" label="时间" sortable="custom" ref="dateSort">
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[ 10, 20, 40]" :page-size="size" :total="total" ></el-pagination>
1.序号
{{scope.$index+(currentPage - 1) *size + 1}}
2.清除排序
3.解决删除最后一项时分页出现问题(数据为空)
思路:当页面总条数 = (当前页数-1)*当前页条数,currentPage减1,重新获取列表; watch:{
total(){
if(this.total==(this.currentPage-1)*this.size&& this.total!=0){
this.currentPage-=1;
this.getTableData();//获取列表数据
}
}
}
element el-table 添加分页连接的序号,清除sortable排序的更多相关文章
- Display Tag Lib Table进行分页
Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- js动态给table添加/删除tr的方法
js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
- Element UI table参数中的selectable的使用
Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...
随机推荐
- python中sort排序
排序并且改变自身结果: nums.sort()
- 一.数据结构&算法的引言+时间复杂度
目录(contents): 1.什么是计算机科学?什么是算法? 2.如何形象化的理解算法? 3.什么是算法分析? 4.时间复杂度 5.数据结构 6.总结算法和数据结构之间的关联 一.什么是计算机科学? ...
- 手机monkey测试BUG重现及解决方法
目录 1.1 Monkey测试简介...1 1.2 Monkey程序介绍...1 1.3 Monkey命令的简单帮助...2 1.4 Monkey命令参数介绍...2 1.5 Monkey测试步骤.. ...
- oracle-ORA-01555错误
Snapshot too old 原因:没有足够的撤销空间满足读一致性而需要撤销信息的长查询
- 杨柳目-杨柳科-Info-新闻:“北京三害”之一,危害堪比雾霾和沙尘,杨絮为什么会肆虐
ylbtech-杨柳目-杨柳科-Info-新闻:“北京三害”之一,危害堪比雾霾和沙尘,杨絮为什么会肆虐 1.返回顶部 1. “北京三害”之一,危害堪比雾霾和沙尘,杨絮为什么会肆虐 18-05-0817 ...
- [React Native] 解析JSON文件
在编写代码时,开发者有时需要存储一些比较多,在应用程序运行时不需要更改的数据.文件大不便于写在代码中,可以把这些数据存储到JSON文件中. 优点非常明显: 1. 数据存放在单独的文件中,代码精简有条理 ...
- uva 10739【基础(区间)dp】
Uva 10739 题意:给定字符串,可以增加.删除.修改任意字符,问最少经过多少次操作使字符串回文. 题解:定义dp[l][r]表示把从l到r的子串Sl...Sr变成回文串需要操作的最少次数.字符可 ...
- 洛谷 P1447 [NOI2010]能量采集 (莫比乌斯反演)
题意:问题可以转化成求$\sum_{i=1}^{n}\sum_{j=1}^{m}(2*gcd(i,j)-1)$ 将2和-1提出来可以得到:$2*\sum_{i=1}^{n}\sum_{j=1}^{m} ...
- python 异常处理技巧
- Win10系统使用Docker安装oracle并通过Navicat for oracle进行登录
一.安装Docker Linux系统可以直接采用命令进行Docker安装: Win7系统安装Dokcer实际通过Boot2Docker在Windows下安装一个VirtualBox来实现: Boot2 ...