• 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了

  • 相关阅读:
    124. Binary Tree Maximum Path Sum
    99. Recover Binary Search Tree
    255. Verify Preorder Sequence in Binary Search Tree
    [LeetCode] 79. Word Search Java
    [LeetCode] 78. Subsets Java
    [LeetCode] 77. Combinations Java
    [LeetCode] 52. N-Queens II Java
    [LeetCode] 51. N-Queens Java
    [LeetCode] 47. Permutations II Java
    [LeetCode] 46. Permutations Java
  • 原文地址:https://www.cnblogs.com/deny/p/15002446.html
Copyright © 2020-2023  润新知