當(dāng)數(shù)據(jù)量比較多，但后臺又是一次性將數(shù)據(jù)返回時，需要對靜態(tài)數(shù)據(jù)驚醒分頁顯示

1. 主要用到Array.prototype.slice()方法：slice 會提取原數(shù)組中索引從 begin 到 end 的所有元素（包含 begin，但不包含 end）
   2.監(jiān)聽分頁的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