教务管理系统 （五）

一、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 = valthis.$emit('callFather', this.pageparm)},handleCurrentChange (val) {/*** 子传父* 参数1 父元素方法* 参数2 数据*/this.pageparm.currentPage = valthis.$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 只能在input标签进行双向数据绑定 , 但 想要给 button 组件的 value 值进行数据绑定就不可以使用它

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

<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（请求时携带凭证信息）

如下所示：

服务器端配置请跳转至：https://segmentfault.com/a/1190000015630862?utm_source=tag-newest

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！