分页显示
1.引入element插件(在main.js中)
在这里插入代码片
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
**2.在需要显示的页面添加:**
<!-- 分页 -->
<!-- total总条目数 page-size:每页多少条-->
<div class="fenye">
<el-pagination
layout="prev, pager, next,total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="size"
<!--size是每页显示多少条-->
:total="content"
<!--这里的content是后端传来的总条数-->
>
</el-pagination>
</div>
**3.方法发送请求并传参**
export default {
data() {
return{
<!--这里是我自己定义的-->
content: 0,
size: 5,
}
//分页
handleSizeChange(val) {
this.pageSize = val;
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
var that = this;
this.currentPage = val;
console.log(`aaaa当前页: ${val}`);
$.ajax({
headers: {
"Authori-zation": "ZhaoJunQiu ",
},
type: "GET",
data: {
role: localStorage.getItem("role"),
<!--传参-->
pageNum: this.currentPage,
pageSize: 4,
},
url: "/apk/returnSubjectExamine",
success: function (res) {
that.content = res.data.count;
<!--下面是日期的显示不用管-->
that.lista = res.data.list.map((el) => {
let obj = Object.assign({}, el);
obj.createTime = new Date(
+new Date(obj.createTime) + 8 * 3600 * 1000
)
.toISOString()
.replace(/T/g, " ")
.replace(/\.[\d]{3}Z/, "");
return obj;
});
},
});
},