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 11 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
详解JavaScript函数对象
Nov 15 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
JS监听Esc 键触发事键
Apr 14 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
15种PHP Encoder的比较
2007/04/17 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Django stark组件使用及原理详解
2019/08/22 Python
python主要用于哪些方向
2020/07/05 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python包的导入方式总结
2021/03/02 Python
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js