先看代码:

<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. 关于sublime text2的一些问题(为解决)

    1. 编写markdown文件后,如何转成pdf ? 2. 执行程序时,如何在控制台输入数据?

  2. 如何用Excel打开CSV文件

    如何用Excel打开CSV文件? CSV文件一般是MS-SQL 导出查询数据的一种格式.格式结构是 用逗号分隔数据,如果直接用Excel打开那么数据不会自动分列.需要进行一定的设置.下面是设置过程. ...

  3. 【软件安装】Linux下安装OpenSSL

    安装环境: 操作系统:Ubuntu14.04 OpenSLL Version:openssl-1.0.2n.tar.gz(1.0.2版本为稳定版本,1.1.0为开发版本) OpenSLL下载地址为:h ...

  4. Java练习 SDUT-2192_救基友记2

    救基友记2 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 屌丝WP的好基友CZ又被妖鬼给抓走了(CZ啊,CZ-.怎么说 ...

  5. 使用Data Lake Analytics从OSS清洗数据到AnalyticDB

    前提 必须是同一阿里云region的Data Lake Analytics(DLA)到AnalyticDB的才能进行清洗操作: 开通并初始化了该region的DLA服务: 开通并购买了Analytic ...

  6. centos7.3 docker安装grafana

    一.编写docker-cmpose文件 docker-compose.yml文件如下: version: "3.3" services: grafana: image: grafa ...

  7. 【Leetcode链表】奇偶链表(328)

    题目 给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1 ...

  8. 【LeetCode】90.Subsets II

    Subsets II Given a collection of integers that might contain duplicates, nums, return all possible s ...

  9. wepy中组件之间通信方法

    events events是WePY组件事件处理函数对象,存放响应组件之间通过broadcast.emit.$invoke所传递的事件的函数. $broadcast —— 父往子传 $broadcas ...

  10. 1<<33这种写法是错的!!!

    1<<33不能这么写,1默认int类型,应该改为(long long)1<<33