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 工具函数学习资料
Apr 29 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 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实现的用户查询类实例
2015/06/18 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python机器学习之神经网络(三)
2017/12/20 Python
对python函数签名的方法详解
2019/01/22 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
django如何自己创建一个中间件
2019/07/24 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
市场营销管理制度
2014/01/29 职场文书
团支部建设方案
2014/05/02 职场文书
给下属加薪申请报告
2015/05/15 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python