前端手动分页

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" :max-height="500">
      <el-table-column type="index" align="center" label="序号" width="55"></el-table-column>
      <el-table-column prop="date" align="center" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" align="center" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" align="center" label="地址"></el-table-column>
    </el-table>
    <div class="page-end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[20, 10, 15, 500]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 1,  //页码
      size:20,  //条数
      total:0,
      dataList: [
        {
          date: '2016-06-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-06-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
        {
          date: '2016-06-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, 
        {
          date: '2016-06-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-06-05',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-06-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
        {
          date: '2016-06-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, 
        {
          date: '2016-06-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-06-09',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-06-10',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
        {
          date: '2016-06-11',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, 
        {
          date: '2016-06-12',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-06-13',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-06-14',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
        {
          date: '2016-06-15',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, 
        {
          date: '2016-06-16',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-06-17',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-06-18',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-06-19',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
        {
          date: '2016-06-20',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, 
        {
          date: '2016-06-21',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-06-22',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-06-23',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-06-24',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
        {
          date: '2016-06-25',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, 
        {
          date: '2016-06-26',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
      ],
      tableData:[]  
    }
  },
  mounted() {
    this.total = this.dataList.length;
    this.getCurrentPageData();
    // console.log('sum', this.sum(1, 2, 3));
    // console.log('add', this.add(5)(6)(7));
    //一、判断数据类型
    //1 typeof 返回具体数据类型
    //局限性 (判断 null/Array 返回结果是object)
    let str = '';
    // console.log('str', typeof (str));

    //2 instanceof，返回值true/false，适用判断引用数据类型 
    let list = [];
    let newObj = {};
    // console.log('arr', list instanceof Array);
    // console.log('object', newObj instanceof Object);

    //3 Object.prototype.toString.call() 判断所有类型
    let res = Object.prototype.toString.call('');
    // let obj2 = {name:'22',title:'title'};
    // console.log('obj2',Object.prototype.toString.call(obj2));
    // console.log(res === "[object String]");

  },
  methods: {
    //手动分页 start
    getCurrentPageData(){
      //开始下标  (页码-1)*条数
      //结束下标  页码*条数
      const startIndex = (this.current - 1) * this.size;
      const endIndex = this.current * this.size;
      this.tableData = [];
      this.tableData = this.dataList.slice(startIndex,endIndex);
    },
    //页
    handleCurrentChange(current) {
      this.current = current;
      this.getCurrentPageData();
    },
    //条数
    handleSizeChange(size) {
      this.size = size;
      this.getCurrentPageData();
    },
    //手动分页 end

    fun() {
      console.log('函数');
    },
    delClick(index) {
      this.list.splice(index, 1);
    },
    sum(a, b, c) {
      return a + b + c;
    },
    //二、js函数柯里化：给一个函数传入一部分参数，此时就会返回一个函数来接收剩余的参数
    add(x) {
      return function (y) {
        return function (z) {
          return x + y + z
        }
      }
    }
  },
}
</script>
<style scoped>
div {
  margin: 0;
  padding: 0;
}
.page-end{
  margin-top:20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
::v-deep .select-box .el-select-dropdown__item {
  padding-right: 0 !important;
}

::v-deep .el-form-item__content {
  line-height: 30px !important;
}

.ml-14 {
  margin-left: 14px;
}

.mr-4 {
  margin-right: 4px;
}

.row-box {
  width: 100%;
  border: 1px solid #eee;
}

.border-right {
  border-right: 1px solid #eee;
}

.width-10 {
  width: 10%;
  text-align: center;
}

.width-30 {
  width: 30%;
  text-align: center;
}

.mt-2 {
  margin-top: 20px;
}

.input-out-box {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  width: 100%;
  font-size: 12px;
  color: #c0c0c0;
}

.input-box {
  height: 100%;
  border-right: 1px solid #DCDFE6;
}

.input-row {
  background-color: #f4f4f5;
  color: #909399;
  border: 1px solid #e9e9eb;
  height: 18px;
  line-height: 18px;
  text-align: center;
  padding: 0 4px;
  border-radius: 4px;
  margin: 2px 0 2px 6px;
}

.search-btn-box {
  padding: 0 14px;
  border-radius: 0 4px 4px 0;
}

/*  */
.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

/*  */
</style>


``