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通过class来获取元素实现代码
Feb 20 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python实现PCA降维的示例详解
2020/02/24 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
python套接字socket通信
2022/04/01 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers