element ui table组件分页组件 序号排序 删除 添加后算法

element ui table组件 分页 后按照顺序排序

效果如如下

template代码如下

 <el-table-column label="序号" type="index" :index="handleIndex" width="120" />
 

type 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
string selection/index/expand
index 如果设置了 type=index，可以通过传递 index 属性来自定义索引
number, Function(index)

具体执行代码

  data() {
    return {
      pageParams: { 
        page: 1, //页码
        pagesize: 2  //每页几条
      }
  },

 // 序号
    handleIndex(index) {
      return this.pageParams.pagesize * (this.pageParams.page - 1) + index + 1
    }
// index代表每页开始计算的数字

添加后是否跳转到下下一页

  computed: {
    // 表格中最大的页码
    maxNum() {
      return Math.ceil(this.total / this.pageParams.pagesize)
    },
    // 最后一页是不是满的
    isLastPageFulled() {
      return this.total % this.pageParams.pagesize === 0
    }
  },



    async doAdd() {
      try {
        const res = await addRole(this.roleForm)
        console.log(res)

        this.loadRoles()
        this.$message.success('添加成功')
        this.showDialog = false
        if (this.isLastPageFulled) {
          this.pageParams.page = this.maxNum + 1
        } else {
          // 想查看最新添加的数据，要跳到最大页码
          this.pageParams.page = this.maxNum
        }
      } catch (err) {
        this.$message.error('添加失败')
        console.log(err)
      }
    },