先看代码:

<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. Tool-图片压缩-腾讯智图:腾讯智图

    ylbtech-Tool-图片压缩-腾讯智图:腾讯智图 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传 ...

  2. Spring_总结

    spring配置Bean 配置形式 基于XML文件的方式 属性注入 构造注入 泛型依赖注入 基于注解的方式 配置方式 全类名(反射) 通过工厂方法 FactoryBean 字面值 <![CDAT ...

  3. 跟我一起安装jenkins

    查看java版本 查看brew版本 升级 java brew cask install java 安装 jenkins brew install jenkins 执行 java -jar /usr/l ...

  4. Python发送邮件(带附件的)

    有时候做自动化测试任务,任务完成后,需要将结果自动发送一封邮件,这里用到smtplib模块,直接导入就行,这里以163邮箱为例,需要用到授权码,我用类写一下: 如果是发送qq邮箱,要将smtp 改成s ...

  5. Android 神兵利器之通过解析网页获取到的API数据合集,可拿来就用

    AppApis 前段时间,写了个做app的实战系列教程,其中一篇章提到了解析网页中的数据为己所用,看到大家的响应还不错,于是把自己以前解析过的网页数据都整理了下,开放出来,给更多的人使用,希望可以帮助 ...

  6. MUI - 为textarea添加语音输入和清除的功能

    为textarea添加语音输入和清除的功能 mui支持input输入框语音输入和清除的功能,只需要添加相关css类即可. http://www.cnblogs.com/phillyx/ 代码如下 &l ...

  7. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  8. 安装完django验证是否安装成功&&运行项目

    1.验证是否成功安装django 上图证明安装成功 2.打开客户端的pycharm,在terminal中打开窗体,什么都没输入,运行下面的命令 python manage.py runserver 在 ...

  9. 巨蟒python全栈开发-第11阶段 ansible_project6

    今日大纲: 1.计划任务前端页面 2.计划任务新增实现 3.计划任务编辑 4.项目详情 5.文件上传 6.replace模块介绍 1.计划任务前端页面 2.计划任务新增实现 3.计划任务编辑 4.项目 ...

  10. 25-3 requests模块的cookie和代理操作

    一.基于requests模块的cookie操作 引言:有些时候,我们在使用爬虫程序去爬取一些用户相关信息的数据(爬取张三“人人网”个人主页数据)时,如果使用之前requests模块常规操作时,往往达不 ...