Antd的table组件表格的序号自增操作


Posted in Javascript onOctober 27, 2020

1,效果图

Antd的table组件表格的序号自增操作

2,实现方法

const columns = [
  {
  title: '序号',
  render:(text,record,index)=>`${index+1}`,
  },
  {
  title:'操作',
  dataIndex:'delete',
  key:'delete',
  render: (text,record) => (
   <span>
   <Link to={{ pathname : '/info/Edit' , query : { id : record.id }}}> 删除</Link>
   </span>
  ), 
  }, 
 ];

补充知识:ant-design表格序号分页连续自增设置

1、预期效果

Antd的table组件表格的序号自增操作

2、设置表格的序号排序方式,我们首先是要到表格序号渲染的位置去修改

注意索引值需要+1

Antd的table组件表格的序号自增操作

3、我所调用的方法是

所需要的参数是当前的页数,当前页的大小,和索引值

export function serialNumber(pageIndex, pageSize, index){
 return (pageIndex-1) * pageSize + index;
}

以上这篇Antd的table组件表格的序号自增操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
浅析node.js中close事件
Nov 26 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 #Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 #Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 #Javascript
ant design 日期格式化的实现
Oct 27 #Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 #Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 #Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 #Javascript
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
Python如何实现机器人聊天
2020/09/10 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
大学信息公开实施方案
2014/03/09 职场文书
金融事务专业求职信
2014/04/25 职场文书
创建文明城市标语
2014/06/16 职场文书
国庆横幅标语
2014/10/08 职场文书
优秀教师事迹材料
2014/12/15 职场文书
三八妇女节主持词
2015/07/04 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
python基础之文件处理知识总结
2021/05/23 Python
python3操作redis实现List列表实例
2021/08/04 Python
Java死锁的排查
2022/05/11 Java/Android