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功能函数(2009-06-04更新)
Jun 04 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
cookie的secure属性详解
Apr 08 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
手机端转换rem适应
Apr 01 Javascript
Javascript实现信息滚动效果
May 18 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
微信小程序事件流原理解析
Nov 27 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判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
微信小程序实现商城倒计时
2020/11/01 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
详解Python中for循环的使用方法
2015/05/14 Python
Python变量作用范围实例分析
2015/07/07 Python
python实现按任意键继续执行程序
2016/12/30 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
一组SQL面试题
2016/02/15 面试题
物流业务员岗位职责
2014/02/08 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
银行贷款委托书范本
2014/10/11 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
MySQL池化框架学习接池自定义
2022/07/23 MySQL