element-ui分页，删除数据之后如何还在当页

<el-pagination
  background
  layout="prev, pager, next,total,jumper"
  style="padding: 30px 0; text-align: center;"
  :total="total"
  :current-page="page"
  :page-size="limit"
  @current-change="fetchData"
  >

问题1：上下页切换不生效

分页插件对应的page-change方法fetchData
在js中定义时需要在参数列表中指定page=1,否则上下页切换不生效。

问题2：在单条删除和多条删除时删除成功默认返回第一页

删除成功不留在当页的解决方案：将fetchData参数列表中指定的page=1换为page=this.page；在data中将page默认值赋值为1即可；

当将最后一页数据全部删除，表格回退，但后台数据请求还在最后一页的解决方式：
在数据删除成功，用total-1 % pageSize 算出最后一页有几条数据，如果<1就将page-1在传给fetchData。

具体代码：

<template>
  <div class="app-container">
    
<div>
   <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
</div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55"/>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="医院名称">
        <template slot-scope="scope">
          {{ scope.row.hosname }}
        </template>
      </el-table-column>
      <el-table-column label="医院编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.hoscode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="api基础路径" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.apiUrl }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系人姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系人手机" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.contactsPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 1 ? '可用' : '不可用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteHospSet(scope.row.id)">删除</el-button>
          <el-button type="danger" size="mini" icon="el-icon-error" @click="lockHospSet(scope.row.id,0)" v-if="scope.row.status==1">锁定</el-button>
          <el-button type="primary" size="mini" icon="el-icon-success" @click="lockHospSet(scope.row.id,1)" v-else>解锁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
  background
  layout="prev, pager, next,total,jumper"
  style="padding: 30px 0; text-align: center;"
  :total="total"
  :current-page="page"
  :page-size="limit"
  @current-change="fetchData"
  >
</el-pagination>
  </div>
</template>

<script>
import { getHospList,delHospSet,delHospSetBatch,lockHospSet } from '@/api/hospSet'

export default {
  
  data() {
    return {
      list: null,
      listLoading: true,
      page:1,
      limit:3,
      total:0,
      //多选赋值
      multipleSelection:[]
    }
  },
  created() {
  	//获取表格数据
    this.fetchData()
  },
  methods: {
    lockHospSet(id,status){
      lockHospSet(id,status).then(res => {
        if(res.code == 200) {
          this.$message({
            type:'success',
            message:'操作成功'
          })
          this.fetchData()
        } else {
          this.$message({
            type:'error',
            message:'操作失败'
          })
        }
      })
    },
    handleSelectionChange(val){
      var that = this;
      console.log('val',val)
      that.multipleSelection = val
    },
    //多选删除
    removeRows(){
      var that = this;
      this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示',{
        confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
        var idList = [];
        for(var i=0;i<that.multipleSelection.length;i++){
          var obj = that.multipleSelection[i]
          var id = obj.id
          idList.push(id)
        }
        delHospSetBatch(idList).then(res => {
            if(res.code === 200){
              this.$message({
                type:'success',
                message:'删除成功'
            })
            //获取多选删除后最后一页数据的数目
            let lastPageSize = (that.total - that.multipleSelection.length) % that.limit;
            //如果最后一页数据小于1就将page-1传给获取数据方法，否则不变
            that.page = lastPageSize < 1 ? that.page - 1 : that.page;
            this.fetchData(that.page)
            }
        })
      }).catch(() => {
        this.$message({
            type:'success',
            message:'取消删除'
          })
      })
    },
    //单选删除
    deleteHospSet(hospSetId) {
      var that = this;
      this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示',{
        confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
        delHospSet(hospSetId).then(res => {
          if(res.code === 200){
            this.$message({
            type:'success',
            message:'删除成功！'
          })
          //获取单选删除后最后一页数据的数目
          let lastPageSize = (that.total - 1) % that.limit;
          //如果最后一页数据小于1就将page-1传给获取数据方法，否则不变
          that.page = lastPageSize < 1 ? that.page - 1 : that.page;
          this.fetchData(that.page)
          }
        })
      }).catch(() => {
        this.$message({
            type:'success',
            message:'取消删除'
          })
      })
      //
      
    },
     onSubmit() {
        this.fetchData()
      },
      //elementui 分页要在函数参数上赋值
    fetchData(page = this.page) {
      var that = this;
      //分页要将参数值接收,后台无需返回current
      that.page = page;
      console.log(that.page)
      this.listLoading = true
      getHospList(that.page,that.limit,that.formInline).then(res => {
        that.total = res.data.total
        that.list = res.data.list
        that.listLoading = false
        console.log(res);
      }).catch(err => {
        console.log(err)
      });
    }
  }
}
</script>