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了

  • 相关阅读:
    Class加载顺序
    Java中9大内置基本数据类型Class实例和数组的Class实例(转载)
    java配置日志总结
    Java格式化CST时间(mysql date类型)
    对称二叉树
    模拟--滑动窗口最大值
    group by两个条件
    P1996 约瑟夫问题
    C++命名空间、标准库(std,全局命名空间)
    java中引用对比C++指针
  • 原文地址:https://www.cnblogs.com/deny/p/15002446.html
Copyright © 2011-2022 走看看