Vue+element实现分页功能

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/jdrunk/article/details/102692654

表格，为表格绑定数据
:data='categories.list’

        <!-- 表格 -->
          //绑定动态数据:data='categories.list'
        <el-table :data='categories.list' class="table">  
            <el-table-column type="selection" align="ceter"></el-table-column>
            <el-table-column prop='name' label='栏目名' align="center"></el-table-column>
            <el-table-column prop='num' label='数量' align="center"></el-table-column>
            <el-table-column  label='图标' align="center">   
              //定义插槽，显示照片
                <template #default='record'>                      
                    <img :src="record.row.icon" alt="照片">
                </template>
            </el-table-column>
            <el-table-column  label='操作' align="center">
                <template v-slot:default='scope'>
                    <a href="" @click.prevent='deleteHandler(scope.row.id)' class="del">删除</a>  
                    <a href="" @click.prevent='updateHandler(scope.row)'>修改</a>    
                </template>    
            </el-table-column>
        </el-table>
    

分页组件
总页数。设置total或page-count，将显示页面。如果需要page-sizes，total是必需的
:total=“categories.total” 动态值
sizes，prev，pager，next 分页的布局，元素之间用逗号分隔
尺寸变化 pageSize改变时会触发

   <!-- 分页 -->
         <el-pagination
            @current-change='pageChangeHandler'    //定义pageChangeHandler函数
            layout="prev, pager, next"
            :page-size="param.pageSize"
            :total="categories.total">
        </el-pagination>
        <!-- 分页结束 -->

 data(){
        return{
            name:'分类管理',
            categories:{
                list:[]
            },                     
            centerDialogVisible: false ,
            form:{},
            sels:[],
            param:{
                name:'',
                page:0,
                pageSize:5
            }         
        }
    },
    created(){        
        this.loadCategories();
    },
    methods:{      
        pageChangeHandler(page){
           this.param.page=page-1;
           this.loadCategories(); 
        },
        async loadCategories(){      
            let response=await axios.post('/category/query',this.param);    //调用后台接口
            this.categories=response.data.data;
        }
    }