vue如何使用elementui分页器，前端分页器

这里是展示的表格，将后端的数据以表格的形式展示出来
<el-table
        :data="tableDatas"
        style="width: 500px">
    <el-table-column style="height: 100px"
                     prop="username"
                     label="职工号"
                     width="120">
    </el-table-column>
    <el-table-column
            prop="name"
            label="姓名"
            width="120">
    </el-table-column>
    <el-table-column
            prop="part_name"
            label="部门">
    </el-table-column>
    <el-table-column
            prop="email"
            label="联系方式">
    </el-table-column>
</el-table>

这个是分页器，使用小型的分页器
<div class="pagenation">
    <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
    >
    </el-pagination>
</div>

1、total 代表的是总的数据条数

2、page_size代表的是每页展示的数据条数

显示到页面的页码 ： < 1 2 3 4 5...10> total/page-size = 10页，页码是1-10，

3、small是小型页码，加上该参数即可

4、后面三个是事件：

        prev-click 事件的点击上一页时触发函数prevfun

        next-click事件点击下一页时触发函数nextfun

current-change事件，当前页发生变化就会触发。

事件处理上

变量设置

data() {
    return {    
        //用来接收后端传递过来的用户信息
        tableDatas: [],
        //需要展示的数据的总数
        total: 5, //先设置给初始值，只给空字符串''会报typeerror
        //下一页 ，可以不设置在get_data中也就不需要赋值
        next: '',
        //上一页，可不设置，在get_data中也就不需要赋值
        prev: '',
        //每页总数
        page_size: 1,//先设置给初始值，只给空字符串''会报typeerror

                }

             }

函数设置

初始化操作

mounted() {   
    //获取用户信息的请求，页面加载后，就从后端拿到数据，将数据展示到前端
    this.get_data()
}

点击页码、下一页、上一页触发相关的函数，实现获取指定页码的数据

methods: {
    //从后端获取到用户的数据的函数，封装陈一个函数跨域给其他的函数使用
    get_data(page=1) {
        this.$axios({
            method: 'get',
            url: this.$settings.base_url + '/user/showuser/?page='+page
        }).then(res => {
            //获取到用户信息，赋值给变量，从后端拿到数据
            this.tableDatas = res.data.results //要展示的数据
            this.prev = res.data.links.previous //这个可以不用
            this.next = res.data.links.next //这个也可以不用
            this.total = res.data.count
            this.page_size = res.data.page_size
        }).catch(error => {
            console.log(error)
        })
    },
    prevfun(value) {
        //value拿到的当前的页码，点击上一页触发该函数
        this.get_data(value)
    },
    nextfun(value) {
        //value拿到页码，点击下一页触发该函数
       this.get_data(value)
    },
    currentchange(value) {
        //页码发生变化会触发，这个用来触发点击页码时触发的。
        this.get_data(value)
    },
},

效果图：