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十个最常用的自定义函数(中文版)
Sep 07 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
js 数组 fill() 填充方法
Nov 02 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/03/16 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
老师对学生的评语
2014/04/18 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
员工考勤管理制度
2015/08/06 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
分享Python异步爬取知乎热榜
2022/04/12 Python