element el-table 添加分页连接的序号,清除sortable排序
先看代码:
<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.清除排序
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排序的更多相关文章
- Display Tag Lib Table进行分页
Display Tag Lib是一个标签库,用来处理jsp网页上的Table,功能非常强,可以对的Table进行分页.数据导出.分组.对列排序等等,反正我在做项目时需要的功能它都给我提供了,而且使用起 ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- js动态给table添加/删除tr的方法
js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
- Element UI table参数中的selectable的使用
Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...
随机推荐
- utf8mb4 使用注意
数据库的表的定义如果是utf8mb4的富文本时,关联的字段必须指定为非utf8,否则 跟其他的表关联的时候,会非常慢,以至于索引都不能使用. 也就是必须的字段才可以使用这个 utf8mb4 ,否则检索 ...
- IntelliJ Idea 复制粘贴的问题
分析 尝试从外部复制内容向Idea工作空间内粘贴文件时,有一定的几率会发生复制粘贴失败的问题:复制了新的内容,粘贴的却还是早些时候复制的旧的内容. 我使用的IDEA是最新版(2016.1.3),操作系 ...
- 网络流24题 骑士共存(DCOJ8023)
题目描述 在一个 n*n 个方格的国际象棋棋盘上,马(骑士)可以攻击的棋盘方格如图所示.棋盘上某些方格设置了障碍,骑士不得进入. 对于给定的 n*n 个方格的国际象棋棋盘和障碍标志,计算棋盘上最多可以 ...
- NPOI操作、导出Excel
//使用NPOI操作Excel private void ExcelNPOI(System.Data.DataTable dt, HttpContext context) { IWorkbook wo ...
- AtCoder Beginner Contest 084 C - Special Trains
Special Trains Problem Statement A railroad running from west to east in Atcoder Kingdom is now comp ...
- select筛选用户数据
- MUI - 引导页制作
引导页制作 本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guid ...
- mysql字段中提取汉字,去除数字以及字母
如果只是删除尾部的中文,保留数据,可以用以下的简单方式 MySQL as num; +------+ | num | +------+ | +------+ DELIMITER $$ DROP FUN ...
- Python基础:13装饰器
装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的应用有插入日志.性能测试.事务处理等.装饰器是解决这类问题的绝佳设计,有了装饰器,我们就可以抽离出大量函数中与函数功能本身无关的雷同 ...
- 手动封装AJAX
正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...