Vue中使用element的el-table进行分页

Vue 中使用element 的 el-table 进行分页，期间显示序号（每页序号进行递增）并且删除完后一页数据后自动显示前一页数据。如图：

直接上源码（注释比较清晰一目了然）

<template>
  <div class="app-container">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="60%">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="条形码" prop="barCode">
            <el-input
              v-model="queryParams.barCode"
              placeholder="请输入条形码"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table
          :data="goodPriceList.slice((currentPage-1)*queryParams.pageSize,currentPage*queryParams.pageSize)"
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column  label="序号" type="index" width="50">
            <template slot-scope="scope">
              <span v-text="getIndex(scope.$index)"> </span>
            </template>
          </el-table-column>
          <el-table-column label="类别" align="center" prop="cateforyId">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.category_type"
                :value="scope.row.categoryId"
              />
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="goodsName" />
          <el-table-column label="数量" align="center" prop="num">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.index"
                @change="handleChange"
                :min="1"
                label="购买数量"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="单位名称" align="center" prop="unit">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.category_unit"
                :value="scope.row.unit"
              />
            </template>
          </el-table-column>
          <el-table-column label="单价(元)" align="center" prop="retailPrice" />
          <el-table-column label="总价(元)" align="center" prop="totalPrice">
            <template slot-scope="scope">
              {{ totalAmount(scope.row.index, scope.row.retailPrice) }}
            </template>
          </el-table-column>

          <el-table-column label="条形码" align="center" prop="barCode" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, goodPriceList)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10,20,30,50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
        >
        </el-pagination>

      </el-aside>

      <el-container>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { listInfo } from "@/api/business/info";
export default {
  dicts: ["category_type", "category_unit"],
  data() {
    return {
     
      //当前页数
      currentPage:1,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
      
        //每页显示条目个数
        pageSize: 10,
      },
      // 显示搜索条件
      showSearch: true,
      // 商品价格信息表格数据
      goodPriceList: [],
    };
  },

  methods: {
    //获取售货价
    getGoodsPrice() {
      listInfo(this.queryParams).then((response) => {
        //console.log(6,response.rows)
        this.goodPriceList.push({
          barCode: response.rows[0].barCode,
          buyingPrice: response.rows[0].buyingPrice,
          categoryId: response.rows[0].categoryId,
          index: "1",
          goodsName: response.rows[0].goodsName,
          id: response.rows[0].id,
          remark: response.rows[0].remark,
          retailPrice: response.rows[0].retailPrice,
          unit: response.rows[0].unit,
         
        });
        //this.goodPriceList = response.rows;
        //this.total = response.total;
        this.total = this.goodPriceList.length;
      });
    },
    //总金额
    totalAmount: function (agr1, agr2) {
      return agr1 * agr2;
    },

    //购买数量
    handleChange(value) {
      //console.log(value);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.barCode != "" && this.queryParams.barCode != null) {
        this.getGoodsPrice();
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //删除当前行数据
    deleteRow(index, rows) {
      const totalPage = Math.ceil((this.total -1 ) / this.queryParams.pageSize);
      console.log('总页数',totalPage,'当前页是：',this.currentPage)
      //当前页
      this.currentPage = this.currentPage > totalPage ? totalPage  : this.currentPage
      this.currentPage = this.currentPage < 1 ? 1 :this.currentPage
      rows.splice(index, 1);
      this.total = this.total - 1;

      
    },
    // 分页
    getIndex($index) {
      return (
        (this.currentPage - 1) * this.queryParams.pageSize + $index + 1
      );
    },
    //监听 pagesize 改变的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
    },
    //监听 页码值 改变的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>


<style>
.el-input-number--mini {
  width: 100px;
}
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /* background-color: #d3dce6;
  color: #333; */
  text-align: center;
  /* line-height: 200px; */
  margin-bottom: 0px;
  
}

.el-main {
  /* background-color: #e9eef3;
  color: #333; */
  text-align: center;
  line-height: 160px;
}



body > .el-container {
  margin-bottom: 40px;
}
</style>