ant design vue(2.2.8版本)的table表格序号连续自增

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

第一步 增加序号界面模板

注意

  1. :pagination表示分页模式,其内容在后续data(){}中进行return
  2. @change为切换页面函数,表示页面变换时的动作
  
        

第二步 加载pagination参数

data() {
    return {
      currentPage: 1,
      pageSize: 8,
      pagination:{
        pageSize:8,
      },
    };
  },

第三项 添加序列栏设置

注意 customRender: "num"需要与tempale中#num对应起来

   {
        title: "序号",
        dataIndex: "index",
        key: "index",
        align: "center",
        width: 50,
        slots: {
          customRender: "num",
        },

第四步

在methods:{}中添加页面变换动作函数

 handleTableChange(pagination){
          // console.log(pagination.current)
    this.pageSize=pagination.pageSize;
    this.currentPage=pagination.current;
    this.pagination = JSON.parse(JSON.stringify(pagination));
        }
  },

你可能感兴趣的:(ant design vue(2.2.8版本)的table表格序号连续自增)