Antd的table组件表格的序号自增操作

1，效果图

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、预期效果

2、设置表格的序号排序方式，我们首先是要到表格序号渲染的位置去修改

注意索引值需要+1

3、我所调用的方法是

所需要的参数是当前的页数，当前页的大小，和索引值

export function serialNumber(pageIndex, pageSize, index){
 return (pageIndex-1) * pageSize + index;
}

以上这篇Antd的table组件表格的序号自增操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ant design 日期格式化的实现

    今天写项目的时候用到ant design中的日期组件,但是由于用ant design日期组件取得的值是moment类型,而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换 第一种写法 我取得的值是年月 如:201806 第二种写法 moment().format('YYYY-MM-DD') 第三种写法 moment(Date.now()).format('YYYY-MM-DD') 获取本地日期的下个月 window.moment().add(1, 'months') 获取当前日

  • 基于ant design日期控件使用_仅月份的操作

    总体效果: 展开后: 选值后: 代码部分: 1.引入: import { DatePicker } from 'antd'; 2.主体部分: export default class PersonInfo extends Component{ constructor() { super(); //设置状态,存储日期 this.state = { workMode: ['month', 'month'], workValue: [], }; } render(){ //主体引用 const {Ra

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • antd-DatePicker组件获取时间值,及相关设置方式

    DatePicker组件默认语言是英语,需要设置为中文的话,需要安装moment. import moment from "moment"; import "moment/locale/zh-cn" format属性,设置日期的格式,如"2020-02-28". 设置日期 选择日期是今天之前[包含今天] 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { consol

  • ant-design表单处理和常用方法及自定义验证操作

    首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator 库.百度的san-xui组件库的表单验证也是依赖与async-validator.说明这个库的实用性还是比较高,可以多了解一下. 首先按照antDesign官网Demo.我们可以copy一个Form表单的demo. LoginForm是表单的组件,下面代码,是React 高阶组件(Hoc). 用于使组件获

  • Ant Design moment对象和字符串之间的相互转化教程

    moment对象转字符串 values.saleStartTime=values.saleStartTime.format('YYYY-MM-DD'); 字符串转moment对象 this.model.saleStartTime=moment(record.saleStartTime); 补充知识:vue ant design 的日期组件range-picker表单中进行moment赋值问题 官方文档这样写 参数 说明 类型 showTime.defaultValue 设置用户选择日期时默认的时

  • ant-design-vue 时间选择器赋值默认时间的操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <div> <a-range-picker show-time format="YYYY/MM/DD HH:mm:ss" :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码 @change="onChangeTime" ><

  • Antd的table组件表格的序号自增操作

    1,效果图 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 }}}&

  • Antd的Table组件嵌套Table以及选择框联动操作

    一.需求 在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行也需要选中. 二.Table的rowSelection配置 父子Table联动,就不能使用OnChange,需要使用OnSelect以及OnSelectAll手动配置. selectedRowKeys:指定选中项的key数组 OnSelect:手动选择/取消选择某行的回调 OnSelect(reco

  • antd design table更改某行数据的样式操作

    antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string-->返回类型是String类型. 例子: import styless from './component/record.css';--->引入css样式. css: .csbsTypes{ font-family:微软雅黑, "Open Sans", "宋体"; font-weight: bold; } 代码: <

  • vue iview 隐藏Table组件里的某一列操作

    1.假设我要隐藏columns里的 "账户组名称" columns: [ { type: 'selection', width: 60, align: 'center' }, { title: '账号ID', key: 'accountIdString' }, { title: '账号名称', key: 'accountName' }, { title: '账户组名称', key: 'accountGroupName' }] 2.根据各自需求去判断 示例:如果是单账户表标题显示&quo

  • 解决Antd Table组件表头不对齐的问题

    背景: 在使用Antd的table组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动 但是在添加了该属性之后,经常会出现表头不对齐的问题: 针对该问题Google 了一下解决方案,但大多不是很完善,为解决问题.现整理下完整的解决方案: 1.对表格的每一行 [columns]设置width属性(留出一行进行宽度自适应): 2.scroll属性中的x选择一个合适的值(或者直接设为 max-content): 如果以上两步仍解决不了对齐问题的话,请继续第三步操作 3.对t

  • 如何使用ant-design-vue的Table组件

    如何使用ant-design-vue的Table组件

    目录 安装脚手架工具 使用Vue CLI新建项目 $slots Table组件相关源码 安装脚手架工具 npm install -g @vue/cli 查看@vue/cli版本,vue -V. 使用Vue CLI新建项目 vue create antd-demo 下载ant-design-vue,ant-design-vue@2.1.6 npm install ant-design-vue@next --save 修改main.js,完整引入ant-design-vue所有组件及样式 impor

  • Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

    Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数

    背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! 出现的问题: 1.使用 Layui 官方提供的 [转换静态表格] 方式初始化加载时报 id 找不到的错误(自己的锅) 2.传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当

  • 解决iview table组件里的 固定列 表格不自适应的问题

    解决iview table组件里的 固定列 表格不自适应的问题

    当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }, { title: '订阅名称', key: 'subscriptionName', minWidth:140 }, { title: '订阅ID', key: 'subscrip

  • antd table按表格里的日期去排序操作

    antd table按表格里的日期去排序操作

    表格内容 根据票据日期升序(这里是已经排序后的效果) 上代码 代码中data的内容如下 根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的时间戳去比较,比较用到的函数是 .sort,一下是用来比较的代码 data.sort(function(a, b) { let aTimeString = a.paper_date; let bTimeString = b.paper_date; let

  • antd vue table表格内容如何格式化

    antd vue table表格内容如何格式化

    目录 antd vue table表格内容格式化 如下面的性别和打印状态 antd table表格组件基本使用 借用官方文档数据,展示下Demo antd vue table表格内容格式化 目前在学习使用ant-design-vue,遇到table内容需要格式化 如下面的性别和打印状态 操作如下 columns中 { title: "性别", dataIndex: "sex", align: "center", width: 80, scoped

随机推荐