先看代码:

<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.清除排序

 this.$refs.dateSort.columnConfig.order = '';

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排序的更多相关文章

  1. Display Tag Lib Table进行分页

    Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...

  2. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  3. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  4. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  5. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  6. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  7. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  8. 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

    在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...

  9. Element UI table参数中的selectable的使用

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...

随机推荐

  1. 深入浅出Cocoa之消息【转】

    在入门级别的ObjC 教程中,我们常对从C++或Java 或其他面向对象语言转过来的程序员说,ObjC 中的方法调用(ObjC中的术语为消息)跟其他语言中的方法调用差不多,只是形式有些不同而已. 譬如 ...

  2. python之浮点型类型

    浮点型:float 如3.14,2.88 class float(object): """ float(x) -> floating point number Co ...

  3. JavaScript--淘宝图片切换

    css样式有点问题,但是主要是js逻辑: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  4. Servlet FilterConfig

    FilterConfig的对象由Web容器创建.这个对象可用于获取web.xml文件中Filter的配置信息 文件:index.html <!DOCTYPE html> <html& ...

  5. python 编码和解码

  6. WPF 线段Line过长渲染出现的问题

    原文:WPF 线段Line过长渲染出现的问题 在使用WPF的时候,可以做一个实验,在canvas里添加一条线段Line,StrokeThickness属性设置为1,然后通过放大canvas或者调整li ...

  7. Python基础:17类和实例之一(类属性和实例属性)

    1:类通常在一个模块的顶层进行定义.对于Python来说,声明与定义类是同时进行的. 2:类属性仅与其类相绑定,类数据属性仅当需要有更加“静态”数据类型时才变得有用,这种属性是静态变量.它们表示这些数 ...

  8. 公司安装mariaDB-5.5.52和Jdk 7

    转自:http://www.cnblogs.com/kgdxpr/p/3209009.html vi /etc/yum.repos.d/MariaDB.repo 加入下面内容 [mariabd]nam ...

  9. php开发微信支付获取用户地址

    http://mp.weixin.qq.com/s/uNpWE_Z5RZ48PDIWkmGBYQ 使用微信获取地址信息是和微信支付一道申请的,微信支付申请通过,就可以使用该功能. 微信商城中,使用微信 ...

  10. MyBatis-使用XML或注解的简单实例

    一.导入jar包 <dependency> <groupId>junit</groupId> <artifactId>junit</artifac ...