zoukankan      html  css  js  c++  java
  • Ant Design Vue-table 序号自增的问题 翻页自增

    参考链接:

    https://www.cnblogs.com/emmamayday/p/14240948.html
    https://blog.csdn.net/qq_38344500/article/details/105995886

    1、使用render

    在  columns 中添加字段

     {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
         50,
        customRender: (text,record,index) => `${index+1}`,
     },

    使用customRender函数来渲染序号的数据,在customRender函数中:

    1、text表示是序号一列默认显示的数据

    2、record表示是一行的所有数据

    3、index表示Table表格数据的下标,也就是数组的下标

    因为数组的下标是从0开始的,所以需要+1。

    这样设置不改变原数据中序号,只改变表格一页的中所显示数据的序号:如一页显示10条数据,那么本页的序号则是从1~10

    这个只能解决不会翻页的自增问题,如果翻页会出现下一页也是从1开始

    2、使用 slot  插槽

     在  columns 中添加字段

    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
         50,
        // customRender: (text, record, index) => `${index + 1}`.
        scopedSlots: { customRender: 'num' }
      },
    ]

     data已经定义了  current 以及  pageSize

    在  a-table  组件添加

        <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            rowKey="id"
            bordered
          >
            <span
              slot="num"
              slot-scope="text, record, index"
            >
              {{(current-1)*pageSize+parseInt(index)+1}}
            </span>
       </a-table>

     这样ant-design的VUE的table分页绑定的pagination就可以实现分页序号自增了,后一页的开始是前一页最后序号的+1了

  • 相关阅读:
    android模拟器中文乱码
    Broadcast Receviewer
    Spring XML配置里的Bean自动装配
    Spring中的Bean配置
    Spring第一个helloWorld
    MyBatis向数据库中批量插入数据
    MyBatis联合查询和使用association 进行分步式查询
    MyBatis编写映射文件实现增删改操作 附说明及代码
    MyBatis全局配置文件MyBatis-config.xml代码
    MyBatis全局配置文件mybatis-config.xml
  • 原文地址:https://www.cnblogs.com/deny/p/15002446.html
Copyright © 2011-2022 走看看