vue——列表优化（删除、批量删除页码减少，序号递增显示）

一、删除、批量删除页码减少

1.列表单个删除，在调用删除接口后，进行下面操作再调列表接口

if (this.queryParams.page > 1 && this.roleList.length == 1) {
 this.queryParams.page--;
}

queryParams为列表请求入参对象，queryParams.page为页码，roleList为列表数组。

2.批量删除，也是在调用删除接口后，进行下面操作再调列表接口

if (
  this.queryParams.page > 1 &&
  (this.roleList.length == 1 ||
    this.roleList.length == this.idsdele.length)
) {
  this.queryParams.page--;
}

queryParams为列表请求入参对象，queryParams.page为页码，roleList为列表数组，idsdele为多选，选中数据。

---

二、序号递增显示

1.在table列表中进行indexMethod方法定义

<el-table-column
 align="center"
 label="序号"
 type="index"
 :index="indexMethod"
 width="70"
/>

2.在methods中写indexMethod方法

indexMethod(index) {
  return index + (this.queryParams.page - 1) * this.queryParams.perPage + 1;
},

queryParams为列表请求入参对象，queryParams.page为页码，queryParams.perPage为每页的页数。