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

战斗中的老段2023-09-24 1:31

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

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

分页效果图