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 ...
随机推荐
- .net WebServer示例及调用(接口WSDL动态调用 JAVA)
新建.asmx页面 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
- mysqldump命令之数据库迁移
格式说明如下: mysqldump -h源主机IP -u源主机用户 -p源主机用户密码 数据库名 | mysql -h目标主机IP -u目标主机用户 -p目标用户密码 数据库名
- 【51NOD1304】字符串的相似度
题目描述 我们定义2个字符串的相似度等于两个串的相同前缀的长度.例如 "abc" 同 "abd" 的相似度为2,"aaa" 同 " ...
- 2019-10-31-C#-强转空会不会出现异常
title author date CreateTime categories C# 强转空会不会出现异常 lindexi 2019-10-31 8:53:6 +0800 2019-9-10 11:4 ...
- python 别名
- PLAY2.6-SCALA(五) Action的组合、范围的设置以及错误的处理
一.自定义action 从一个日志装饰器的例子开始 1.在invokeBlock方法中实现 import play.api.mvc._ class LoggingAction @Inject() (p ...
- MUI - 封装localStorage与plus.storage
MUI - 封装localStorage与plus.storage 2.0版本 在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存, 在切换到localstorage时 ...
- Cmakelists.txt中配置glew
在cmakelists.txt中添加: add_library(glew_static STATIC IMPORTED) set_target_properties(glew_static PROPE ...
- HZOJ trade
强烈谴责$skyh$的没$\Huge 脸$行为. 很经典的可反悔贪心,然而我一直以为是sbdp还一直想着怎么优化…… 正常的贪心肯定是不对的. 但是由于A-C=A-B+B-C, 所以用一个小根堆维护, ...
- 【NS2】TCL debug (转载)
1.使用NS2进行模拟,就不可避免的会接触TCL/OTCL和C/C++.两者配合使用.一般设置场景啊,业务流啊,都使用TCL/OTCL来编写脚 本.要进行路由实验模拟的话,同一类的实验,这些脚本基本上 ...