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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP session 会话处理函数
2016/06/06 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python变量作用范围实例分析
2015/07/07 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
七年级英语教学反思
2014/01/15 职场文书
大学生毕业求职信
2014/06/12 职场文书
公司新人试用期自我评价
2014/09/17 职场文书