vue+element-ui純フロントエンドテーブルページングクエリーを実現

データ量が大きすぎる場合は、純粋なフロントエンドのページングに適しておらず、バックグラウンドと組み合わせて使用する必要があります.

  export default {
    name: 'TableDemo',
    data() {
      return {
        tableData: [{
          date: '2016-05-01',
          name: '   ',
          address: '           1518  '
        }, {
          date: '2016-05-02',
          name: '   ',
          address: '           1517  '
        }, {
          date: '2016-05-03',
          name: '   ',
          address: '           1519  '
        }, {
          date: '2016-05-04',
          name: '   ',
          address: '           1516  '
        },{
          date: '2016-05-05',
          name: '   ',
          address: '           1518  '
        }, {
          date: '2016-05-06',
          name: '   ',
          address: '           1517  '
        }, {
          date: '2016-05-07',
          name: '   ',
          address: '           1519  '
        }, {
          date: '2016-05-08',
          name: '   ',
          address: '           1516  '
        },{
          date: '2016-05-09',
          name: '   ',
          address: '           1518  '
        }, {
          date: '2016-05-10',
          name: '   ',
          address: '           1517  '
        }, {
          date: '2016-05-11',
          name: '   ',
          address: '           1519  '
        }, {
          date: '2016-05-12',
          name: '   ',
          address: '           1516  '
        }],
        total: 0,
        pageSize:2,
        currentPage:1,
        tableDataEnd:[]
      }
    },
    created() {
      this.total = this.tableData.length;
      if (this.total > this.pageSize) {
        for (let index = 0; index < this.pageSize; index++) {
          this.tableDataEnd.push(this.tableData[index]);
        }
      } else {
        this.tableDataEnd = this.tableData;
      }
    },
    methods: {
      handleSizeChange: function (pageSize) { //       
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
      },
      handleCurrentChange: function (currentPage) {//    
        this.currentPage = currentPage;
        this.currentChangePage(this.tableData, currentPage);

      },
      //    （  ）
      currentChangePage(list, currentPage) {
        let from = (currentPage - 1) * this.pageSize;
        let to = currentPage * this.pageSize;
        this.tableDataEnd = [];
        for (; from < to; from++) {
          if (list[from]) {
            this.tableDataEnd.push(list[from]);
          }
        }
      }
    }
  }