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 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
详解Vue方法与事件
Mar 09 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
谈谈JavaScript中的函数
Sep 08 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php curl的深入解析
2013/06/02 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Node接收电子邮件的实例代码
2017/07/21 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
TensorFlow变量管理详解
2018/03/10 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
Python多继承顺序实例分析
2018/05/26 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Django如何将URL映射到视图
2019/07/29 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
营销与策划个人求职信
2013/09/22 职场文书
模具毕业生推荐信
2014/02/15 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
教师节联欢会主持词
2015/07/04 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Python自然语言处理之切分算法详解
2021/04/25 Python