这里是展示的表格,将后端的数据以表格的形式展示出来 <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) }, },
效果图: