教务管理系统 （五）

一、elementui 分页器无法实现分页效果的解决办法，困惑多时😩😩

在做项目时其中有一个页面需要用到 elementui 中的 pagination组件 进行分页显示，但是按照官方文档配置后结果始终不能分页显示数据，全部数据都显示在一个页面上，点击下面的分页数字无响应

---

解决办法：

进行数据的分割 ，把获取的全部数据线储存在一个数组（rightData）中，再新建一个数组（listData），里面存放按要求分割的数据段（比如要求每页显示 10 条数据 ， 就每次向rightData里面按顺序切割10条数据放在 listData中 遍历listData渲染页面）

完整代码：

1. 在components 文件中新建一个 Pagination.vue

/**
* 分页组件
*/
<template>
  <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[4, 10, 15]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['childMsg'],
  data () {
    return {
      pageparm: {
        currentPage: this.childMsg.currentPage,
        pageSize: this.childMsg.pageSize
      }
    }
  },
  created () {},
  methods: {
    handleSizeChange (val) {
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.pageSize = val
      this.$emit('callFather', this.pageparm)
    },
    handleCurrentChange (val) {
      /**
       * 子传父
       * 参数1 父元素方法
       * 参数2 数据
       */
      this.pageparm.currentPage = val
      this.$emit('callFather', this.pageparm)
    }
  }
}
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>

2. 然后在需要分页器的组件中引用封装好的 Pagination

<Pagination :child-msg="pageparm" @callFather="callFather"></Pagination>

3. data域

4. methods方法域：

---

二、 如何实现 elementui 中的 button 组件的 value值 进行数据绑定

首先我们知道 :model

可以如下所示进行数据绑定

<el-button type="info" class="getJudgeCode" @click="getJudgeCode(stuForm)" :disabled="disabled" :model="buttomValue" >{{buttomValue}}</el-button>

---

三、获取验证码60秒倒计时逻辑代码

---

data域：

method域：

---

四、 vue + Java 前后端分离，多次请求Session不一致的问题 （以下是前端配置）

这是典型的跨域问题

解决方法：

Vue项目用的axios发送请求，在main.js中增加以下配置：

import axios from 'axios'

axios.defaults.withCredentials = true // 解决前端跨域问题

使用时，设置 withCredentials: true（请求时携带凭证信息）

如下所示：

---