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)
      },

分页效果图

相关推荐
当牛作馬5 分钟前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw017 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖20 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
武昌库里写JAVA21 分钟前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
小飞悟44 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖1 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python