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的几种方法
Oct 23 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP Pear 安装及使用
2009/03/19 PHP
PHP $_FILES函数详解
2011/03/09 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
jQuery实现本地存储
2020/12/22 jQuery
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python正规则表达式学习指南
2016/08/02 Python
python实现按任意键继续执行程序
2016/12/30 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
英语专业学子个人的自我评价
2013/10/02 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
顶撞老师检讨书
2014/02/07 职场文书
企业挂职心得体会
2014/09/10 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
清明扫墓感想
2015/08/11 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers