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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
koa-router源码学习小结
Sep 07 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
ES6 解构赋值的原理及运用
May 25 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正则的Unknown Modifier错误解决方法
2010/03/02 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
python提取内容关键词的方法
2015/03/16 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python3 深浅copy对比详解
2019/08/12 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python缩进长度是否统一
2020/08/02 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
学徒工职责
2014/03/06 职场文书
促销活动总结怎么写
2014/06/25 职场文书
经济贸易系求职信
2014/08/04 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
班主任培训研修日志
2015/11/13 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL