先看代码:

<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. 【JZOJ4756】【NOIP2016提高A组模拟9.4】幻象

    题目描述 phantom是一位爱思考的哲♂学家. 最近phantom得到了森の妖精的真传.在他练功的时候, 每秒他的思绪中都有一定的概率浮现出奇♂异的幻象,持续x秒的幻象将产生x^2 的幻象值. ph ...

  2. jsp项目中整个项目没有问题但是servlet报错

    项目没问题但是serverlet报错 项目右键 buildPath-->configure build path -->Myeclipse Library-->J2EE 1.3 Li ...

  3. BZOJ 1500 洛谷2042维护序列题解

    BZ链接 洛谷链接 这道题真是丧心病狂.... 应该很容易就可以看出做法,但是写代码写的....... 思路很简单,用一个平衡树维护一下所有的操作就好了,重点讲解一下代码的细节 首先如果按照常规写法的 ...

  4. MUI - 引导页制作

    引导页制作 本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guid ...

  5. C - League of Leesins-构造

    题意就是给多个三元组(内部没有顺序),让你构造一个序列,使得所有的三元组都是存在的 简单的思考后就会发现一个简单的思路,开头的数一定只出现一次,进而可以找到头或者尾部的第一个三元组,然后我们知道序列最 ...

  6. *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbackParameters 0x1d4442e50> setNilValueForKey]: could not set nil as the value for the key rate.'

    *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbac ...

  7. Flask学习之五 用户登录

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-v-user-logins 中文翻译地址:http:// ...

  8. 手动封装AJAX

    正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 13 -3 jquery选择器和 jquery动画

    一 选择器: 1 基本选择器 例子: <!--id 类 标签--> <!DOCTYPE html> <html lang="en"> <h ...

  10. 2019-8-31-dotnet-通过-WMI-获取系统补丁

    title author date CreateTime categories dotnet 通过 WMI 获取系统补丁 lindexi 2019-08-31 16:55:59 +0800 2019- ...