element-ui+vue实现快速分页

最新推荐文章于 2022-10-09 15:20:57 发布

无人能及的2333

最新推荐文章于 2022-10-09 15:20:57 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/z1589714/article/details/103312616

版权

                   element-ui+vue实现快速分页

       1.element-ui的Pagination可以实现快速分页
       2.定义
           data () {
               return {
                           currentPage:1, //初始页
                           pagesize:10, // 每页的数据
                           Types: []   //接收后端返回的数据
               }
           },

       3.
           mounted:function(){
               this.getTypeList();
           },
           或者
           created() {
               this.getTypeList()
           },
           都是代表页面初始化调用里面的函数

       3.书写函数
           methods: {
               // 初始页currentPage、初始每页数据数pagesize和数据data
               handleSizeChange: function (size) {
                       this.pagesize = size;
                       console.log(this.pagesize) //每页下拉显示数据
               },
               handleCurrentChange: function(currentPage){
                       this.currentPage = currentPage;
                       console.log(this.currentPage) //点击第几页
               },
               getTypeList() {
                   api._list().then(res => {//这一行只是进行了封装一次，其实还是调用内部的axios的get方法发送请求
                       console.info(res)
                       this.Types = res;   //Types，在el-talbe的data作为收到的数据，只要和el-table里面的el-table-column的prop一致，会自动映射
                   }).catch((res) => {
                       console.log(res)
                   });
               },
           }

       4.el-talbe(重要重要重要)
           <el-table :data="Types.slice((currentPage-1)*pagesize,currentPage*pagesize)"       //最重要的地方
style="width: 100%;margin-top:20px;"
height="443">
<el-table-column
width="60">
</el-table-column>
<el-table-column
width="40" prop="type_id" label="" :width="100">
</el-table-column>
<el-table-column
prop="type_name"
label="类型"
width="100">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="75">
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 0" size="small" type="danger">禁用</el-tag>
<el-tag v-else size="small">正常</el-tag>
</template>
</el-table-column>
<el-table-column
inline-template
label="操作"
width="250">
<span>
<el-button type="danger" size="small" @click="removeType(row)">删除</el-button>
<el-button type="success" size="small" @click="updateType(row)">编辑</el-button>
</span>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
           :page-size="pagesize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="Types.length">
           </el-pagination>