VUE UI 组件 Element 中分页的使用

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

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

1. 分页属性

<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中 和计算页码

2. 下面是数据

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

3. 接着是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()
        }
    },

4. 最后是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.data
                if (res.status === 200) {
                	// 将请求的数据存在之前定义的的tableData数组中
                    this.tableData = res.data
                    console.log(this.tableData)
                }
            })
        }
        // 下面这个请求 用于获取所有的数据
        axios({
            method: 'post',
            url: 'http://192.168.97.251:3000/getNews'
        }).then((res) => {
            res = res.data
            if (res.status === 200) {
            	// 将数据的长度存入newsLength中
                this.newsLength = res.data.length
                console.log(this.newsLength)
            }
        })
        // 文档加载完成时调用newsShow方法渲染数据
        this.newsShow()
    }

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

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