分数页面增加分页

Author: YXJ2018

exam/src/components/student/scoreTable.vue

@@ -29,6 +29,17 @@
  </template>
  </el-table-column>
  </el-table>
+ <el-row type="flex" justify="center" align="middle" class="pagination">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="pagination.current"
+ :page-sizes="[4,6,8,10]"
+ :page-size="pagination.size"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="pagination.total">
+ </el-pagination>
+ </el-row>
  </section>
  </div>
 </template>
@@ -37,6 +48,11 @@
 export default {
  data() {
  return {
+ pagination: { //分页后的留言列表
+ current: 1, //当前页
+ total: null, //记录条数
+ size: 10 //每页条数
+ },
  loading: false, //加载标识符
  score: [], //学生成绩
  filter: null //过滤参数
@@ -49,10 +65,11 @@ export default {
  methods: {
  getScore() {
  let studentId = this.$cookies.get("cid")
- this.$axios(`/api/score/${studentId}`).then(res => {
+ this.$axios(`/api/score/${this.pagination.current}/${this.pagination.size}/${studentId}`).then(res => {
  if(res.data.code == 200) {
  this.loading = false //数据加载完成去掉遮罩
- this.score = res.data.data
+ this.score = res.data.data.records
+ this.pagination = {...res.data.data}
  let mapVal = this.score.map((element,index) => { //通过map得到 filter:[{text,value}]形式的数组对象
  let newVal = {}
  newVal.text = element.answerDate
@@ -68,6 +85,16 @@ export default {
  }
  })
  },
+ //改变当前记录条数
+ handleSizeChange(val) {
+ this.pagination.size = val
+ this.getScore()
+ },
+ //改变当前页码，重新发送请求
+ handleCurrentChange(val) {
+ this.pagination.current = val
+ this.getScore()
+ },
  formatter(row, column) {
  return row.address;
  },
@@ -83,6 +110,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.pagination {
+ padding-top: 20px;
+}
 .table {
  width: 980px;
  margin: 0 auto;