Vue之ant design的table表格序号连续自增

结合分页实时监听当前页和pagesize值,从而实现a-table表格随数据连续自增,代码如下:

首先定义渲染的表格,自定义列columnShareDetail

      
                 

在data中定义columnShareDetail,和分页paginationOpt

// 分页
      paginationOpt: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数,必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "15", "20"],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.defaultCurrent = 1;
          this.paginationOpt.defaultPageSize = pageSize;
          this.searchCameraFrom(); //显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt.defaultCurrent = current;
          this.paginationOpt.defaultPageSize = size;
          this.searchCameraFrom();
        },
      },



// 摄像机列
      columnShareDetail: [
        {
          title: "序号",
          customRender: (text, record, index) =>
            `${(this.paginationOpt.defaultCurrent - 1) *
              this.paginationOpt.defaultPageSize +
              index +
              1}`,
        },
]

 

你可能感兴趣的:(Vue,+,Ant,Design,Vue,vue.js,前端)