vue 封装element公共组件 +后端联调

首先封装的是一个分页,也是项目组封装公共组件最多之一

1-1创建一个新的页面放分页功能

复制代码
<template>
    <div>
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[100, 200, 300, 400]"
        :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
    </div>
</template>

<script>
export default {
     data() {
      return {
        currentPage1: 5,
      };
    },
     methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
}
</script>

<style>

</style>

1-2在使用那个页面当中导入这个分页页面

复制代码
import Pagination from '@/components/pagigation/Pagination.vue'

1-3在使用的页面注册一下

复制代码
components:{
        Pagination
    },

1-4上边去显示

复制代码
   <!-- 分页 -->
       <div class="pagination">
         <Pagination></Pagination>
       </div>

分页切换视图更新

在子组件定义props接受从外面传递过来的值,父页面在子标签里边定义这个变量

复制代码
 // props它里面接受从外面传递的值
    // default是默认的意思
    props:{
        total:{
            type:Number,
            default:100
        },
        pageSize:{
            type:Number,
            default:10
        }
    }

  <Pagination :total="total" :pageSize="pageSize"></Pagination>

再从表格获取这个总条数和页数

复制代码
 async projectList(page){
        let res = await this.$api.projectList({page})
            console.log('产品列表数据',res.data);
            this.tableData = res.data.data//获取表格数据
            this.total =res.data.total//获取分页的总共
            this.pageSize = res.data.pageSize//获取分页页数
        }

,

总条数和页数要和数据同步

需要在子组件里边使用$emit里边定义一个方法

复制代码
  handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.$emit('CurrentChange',val)
      }

在父页面子组件接收这个方法

复制代码
  <Pagination :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange"></Pagination>

在methods里边写这个方法总条数和页数就和表格里边数据同步了

复制代码
  CurrentChange(val){
        this.projectList(val)
      },

分页效果图

相关推荐
掘金酱6 分钟前
2025年6月【创作者训练营】开奖公示 🎇
前端
布兰妮甜10 分钟前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
久爱@勿忘12 分钟前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021113 分钟前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依17 分钟前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
Monkey的自我迭代28 分钟前
Python标准库:时间与随机数全解析
前端·python·数据挖掘
行云&流水29 分钟前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
知了清语1 小时前
pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理
前端
弗锐土豆1 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依