elementui table的静态数据分页

当数据量比较多，但后台又是一次性将数据返回时，需要对静态数据惊醒分页显示

1. 主要用到Array.prototype.slice()方法：slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）
   2.监听分页的current-change事件，改变tableData的值

• HTML部分

<el-table :data="tableData" style="width: 100%" ref="multipleTable" row-key="id" @selection-change="handleSelectChange" >
        <el-table-column :label="col.label" show-overflow-tooltip v-for="col in cols" :key="col.prop" :render-header="setHeaderWidth">
          <template slot-scope="scope">
            <span>{{ scope.row[col.prop] }} </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" @current-change="handleCurrentChange" :current-page="page"
                     :page-size="pageSize" layout="total, prev, pager, next"  :total="total">
      </el-pagination>

• JS部分

data() {
    return {
      page: 1,
      pageSize: 15,
      tableData:[],
      tableDatas:{}
      col:[{prop: 'nsrlxDm', label: '纳税人类型'}, {prop: 'nsrmc', label: '纳税人名称'}]
    }
  },
methods:{
handleCurrentChange(val) {
      this.$emit('currentChange', val, this.selectedRow)
      this.tableData = this.tableDatas.data.slice((val-1)*this.pageSize,val*this.pageSize)
    },
}

3.主要改动为

image.png