VUE UI 组件 Element 中分页的使用

从17:00到20:30 与分页战斗

正在清算战利品 >>>>>

分页属性

<div class="block newsPage"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-sizes="[5, 10, 15, 20]":page-size="count"layout="total, sizes, prev, pager, next, jumper":total="newsLEngth"></el-pagination>
</div>

额属性的描述就不说了：直接官网文档查看吧
还是简单的说一说吧！

event	用法
size-change	这个是监听当前数据显示条数的当显示条数发生变化的时候做某件事
current-change	监听当前的页码，当页码发生变化时做某事
page-sizes	可供选择的当前页数据的条数这里就是当前可显示 5 条数据、10条数据、15条、20条，可自定义
page-size	数据显示的条数
layout	分页器的bar total:总条数、sizes:对应page-sizes选择单页显示数量、prev:上一页、pager:页码、next:下一页、jumper:页面跳转
total	数据的总条数：用于显示在total中和计算页码

下面是数据

 data () {return {// 空数组 存放请求的数据tableData: [],// 用于计算数据的长度newsLength: 0,// 默认的页码page: 1,// 默认单页渲染数据的条数count: 5,// 定义一个变量来存放方法newsShow: ''}},

接着是methods

 methods: {// 每页数据条数监听 val为传的值 对应前面所说的page-sizes handleSizeChange (val) {console.log(`每页 ${val} 条`)// 将其存入定义的count中，会把这个数据传给后台this.count = val// 当count改变的时候重新获取数据并刷新页面（调用newsShow方法）this.newsShow()},// 监听页码变化val为页码handleCurrentChange (val) {console.log(`当前页: ${val}`)// 将其存入定义的page中，会把这个数据传给后台this.page = val// 当page改变的时候重新获取数据并刷新页面（调用newsShow方法）this.newsShow()}},

最后是axios请求数据

mounted () {// 封装axios方法 它是异步方法所以 如下写法，//另采用箭头函数是为了保证this指向的是vue实例// 这里还记得之前在data定义的newsShow吗？// 为了方便在methods里面调用这个方法 才放在Vue实例中// 用let 或者 var 定义是调用不了的哟 // const 还没看呢不知道行不行this.newsShow = async () => {axios({method: 'post',url: 'http://192.168.97.251:3000/getNewsByPage',// 这里是要传给后台的数据data: {page: this.page,count: this.count}}).then((res) => {// 成功数据在then方法中// 注意此处的结构 请求的数据在res.data中res = res.dataif (res.status === 200) {// 将请求的数据存在之前定义的的tableData数组中this.tableData = res.dataconsole.log(this.tableData)}})}// 下面这个请求 用于获取所有的数据axios({method: 'post',url: 'http://192.168.97.251:3000/getNews'}).then((res) => {res = res.dataif (res.status === 200) {// 将数据的长度存入newsLength中this.newsLength = res.data.lengthconsole.log(this.newsLength)}})// 文档加载完成时调用newsShow方法渲染数据this.newsShow()}

最后的 当然是后台服务器
咱啥也别说了直接来github
服务器文件github地址点击获取 ^ - ^
**注意**
数据库的配置在 config文件中，写的是127.0.0.1 可根据自己更改

里面有两个接口 /getNews 和 /getNewsByPage
其中 /getNews 不需传参数
/getNewsByPage 需要 page （页码）和count （单页显示数量）两个参数。

VUE UI 组件 Element 中分页的使用相关推荐

Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）
文章目录 Vue UI 组件库 7.1 移动端常用 UI 组件库 7.2 PC 端常用 UI 组件库 7.3 Element UI基本使用 7.4 Element UI按需引入 Vue UI 组件库 ...
Vue UI组件库以及 Element UI 使用
Vue UI组件库以及 Element UI 使用 1. Vue UI 组件库 1.1 移动端常用 UI 组件库 1.2 PC 端常用 UI 组件库 2. Element UI 2.1 安装 2.2 ...
16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
vant引入组件报错_强烈推荐优秀的Vue UI组件库
在我们实际开发中常常因为项目周期短不得不引入一些UI框架来辅助开发那常见的比较好的UI框架有那些呢(基于VUE) Element UI组件库 (pc端) Element,一套为开发者.设计师和产品经 ...
17款优秀的Vue UI组件库汇总
17款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
Vue UI组件库总结推荐
基于Vue的Quasar Framework 介绍这个框架UI组件很全面,准备下次使用这个框架了基于Vue的Quasar Framework 中文网 http://www.quasarchs.co ...
优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
你知道这些吗？8款优秀的Vue UI组件库推荐，都能打开呦
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入 ...
14 个最佳 Vue UI 组件库推荐
Vue.js 是无数前端开发人员首选的 JavaScript 框架,因为它易于学习和使用. 组件是 Vue 框架的核心--它们可以帮助你更快地从想法转变为功能性 UI. 在这个集合中,您可以找到最好的 ...

VUE UI 组件 Element 中分页的使用

从17:00到20:30 与分页战斗

VUE UI 组件 Element 中分页的使用相关推荐

最新文章

热门文章