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

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

      <!-- 数据展示表格 -->
         <a-table
            :columns="columnShareDetail"
            :dataSource="cameraList"
            :pagination="paginationOpt"
            bordered
          ></a-table>        

在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}`,
        },
]

 

Logo

前往低代码交流专区

更多推荐