先看代码:

<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. Maple拥有优秀的符号计算和数值计算能力

    https://www.maplesoft.com/products/maple/ Maple高级应用和经典实例: https://wenku.baidu.com/view/f246962107221 ...

  2. java reference(转)

    http://blog.163.com/xubin_3@126/blog/static/112987702200962211145825/ 在Java中的引用类型,是指除了基本的变量类型之外的所有类型 ...

  3. 编程语言分类及python所属类型

    编程语言分类及python所属类型 编程语言主要从以下几个角度为进行分类:编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言. 编译和解释的区别是什么? 编译器是把源程序的每一条语句都 ...

  4. awss3

    import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.io ...

  5. HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  6. Word画线条5大技巧,简单实用!

    [Word画线条5大技巧,简单实用!]1.输入三个“=”,回车,就是一条双直线:2.输入三个“~”,回车,就是一条波浪线:3.输入三个“”回车,就是一条虚线:4.输入三个“-”,回车,就是一条直线:5 ...

  7. ACM:树的变换,依据表达式建立表达式树

    题目:输入一个表达式.建立一个表达式树. 分析:找到最后计算的运算符(它是整棵表达式树的根),然后递归处理!             在代码中.仅仅有当p==0的时候.才考虑这个运算符,由于括号中的运 ...

  8. Java中清空session的方法

    session.removeAttribute("sessionname")是清除SESSION里的某个属性. session.invalidate()是让SESSION失效. 或 ...

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

    1.主机的增删改查 2.初始化的增删改查 3.项目的增删改查

  10. Python基础:14生成器

    yield表达式只用于定义生成器函数,且只能存在于函数的定义体中.只要一个函数内部使用了yield表达式,则该函数就成为生成器函数. 当调用生成器函数时,它返回一个称为生成器的迭代器.然后该生成器控制 ...