elementui el-table根据分页显示表格序号

<template>

  <div>

    <el-table

      ref="table"

      :data="tableData"

      border

      stripe

      :height="tableHeight"

      :header-cell-style="{'background':'#F5F4F7'}"

    >

      <el-table-column

        type="index"

        label="序号"

        width="60"

        :index="indexMethod"

        align="center"

      />

      <el-table-column

        prop="stroperationtype"

        label="数据操作类别"

        width="150"

      />

      <el-table-column

        prop="stroperationname"

        label="操作名称"

        min-width="120"

      />

      <el-table-column

        prop="strrownumber"

        label="操作数据条数"

        min-width="120"

      />

      <el-table-column

        prop="strrownumber"

        label="已导入条数"

        min-width="120"

      />

      <el-table-column

        prop="strtime"

        label="操作时间"

        min-width="120"

      />

      <el-table-column

        prop="stryearperiod"

        label="年度期间"

        min-width="120"

      />

      <el-table-column

        label="操作"

        width="160"

        fixed="right"

        align="center"

      >

        <template v-slot="scope">

          <el-button

            type="text"

            @click="delRow(scope.row)"

          >删除</el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-pagination

      v-if="paging.total > 0"

      background

      :current-page.sync="paging.page"

      :page-sizes="[50, 100, 500, 1000]"

      :page-size.sync="paging.size"

      layout="total, sizes, prev, pager, next, jumper"

      :total="paging.total"

      @size-change="queryListByPage"

      @current-change="queryListByPage"

    />

  </div>

</template>

<script>

import calculateCommonTableHeight from '@/layout/mixin/calculateCommonTableHeight'

import { queryList, delData } from '@/api/data-interface/extract-data'

export default {

  name: 'TableArea',

  mixins: [calculateCommonTableHeight],

  props: {

    searchForm: {

      type: Object,

      default: () => {}

    }

  },

  data() {

    return {

      tableData: [],

      paging: {

        total: 0,

        page: 1,

        size: 50

      }

    }

  },

  created() {

    this.queryListByPage()

  },

  methods: {

    indexMethod(index) {

      index = (index + 1) + (this.paging.page - 1) * this.paging.size

      return index

    },

    queryListByPage() {

      this.$nextTick(() => {

        queryList(

          this.searchForm,

          this.paging.page,

          this.paging.size

        ).then(res => {

          if (res.code === 20000) {

            this.paging.total = res.data.total

            this.tableData = res.data.rows

          }

        })

      })

    },

    // 删除

    delRow(row) {

      console.log(row)

      this.$confirm('是否删除该信息?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        delData(row.lnglogid).then(res => {

          if (res.code === 20000) {

            this.$message({

              showClose: true,

              message: res.message,

              type: 'success'

            })

            this.queryListByPage()

          }

        })

      }).catch(() => {

        this.$message({

          type: 'info',

          message: '已取消删除'

        })

      })

    }

  }

}

</script>

<style scoped>

</style>