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 相关文章推荐
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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
无限级别菜单的实现
2006/10/09 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
javascript常用代码段搜集
2014/12/04 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
python实现桌面气泡提示功能
2019/07/29 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
护理专业学生职业生涯规划范文
2014/03/11 职场文书
销售经理竞聘书
2014/03/31 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
我的长征观后感
2015/06/09 职场文书
我是特种兵观后感
2015/06/11 职场文书
病假证明模板
2015/06/19 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书