vue基于element-ui二次封装分页组件和一些优化

你的名字 2021-09-03 07:37 612阅读 0赞

#### 先来看一下整体的需求分析 ####

1.  有表格的地方，就有分页，怎么做到表格样式统一
2.  多个分页，代码重复，如何减少代码重复
3.  地址栏输入页码，如何去通知当前分页状态的改变
4.  刷新之后，如何保持当前页面分页数据(不回到最初)
5.  怎样更少的将数据监听，不会都挂载到data上(抽取成方法)
6.  beforeRouteUpdate ，computed， watch 的使用，提高代码的质量

element-ui的分组组件提供的四个事件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

#### 1.组件封装 把需要的属性提取出来 ####

<template>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :total="total"
          :current-page="current"
          :page-size="pageSize"
          :layout="layout"
        ></el-pagination>
      </div>
    </template>
    
    <script>
    export default { 
      name: "Pagination",
      props: { 
        // 总页数
        total: { 
          type: Number,
          default: 0,
        },
        // 当前页
        currentPage: { 
          type: Number,
          default: 1,
        },
        // 每页显示条数
        pageSize: { 
          type: Number,
          default: 10,
        },
        // 总体功能
        layout: { 
          type: String,
          default: "total, prev, pager, next, jumper",
        },
      },
      computed: { 
        current() { 
          return this.currentPage;
        },
      },
      methods: { 
        // 当前页码变化
        handleCurrentChange(val) { 
          this.$emit("pageChange", val);
        },
      },
    };
    </script>
    
    <style scoped lang="less">
    .pagination { 
      display: flex;
      justify-content: center;
      padding-top: 20px;
      padding-bottom: 20px;
      background: #fff;
      width: 98%;
    }
    </style>

### 2.定义 ###

import Pagination from "@/components/Pagination";
    
     components: { 
        Pagination,
      },

### 3. 调用 ###

<Pagination
            v-show="total > 0"
            :total="total"
            :currentPage="listQuery.pageNo"
            :pageSize="listQuery.pageSize"
            @pageChange="handleCurrentChange"
          />

方法使用

handleCurrentChange(val) { 
          this.listQuery.pageNo = val;
          this.$router.push({ 
            path: "/passed",
            query: this.listQuery,
          });
        },

### 4. 数据初始化和路由的监控 ###

1.  ##### 数据初始化，分两种情况 ：默认值和地址传参—》 此过程封装成方法，在初始化时调用 #####

created() { 
       this.parseQuery();
     },
    
      parseQuery() { 
         const query = Object.assign({ }, this.$route.query);
         // 初始化参数
         let listQuery = { 
           pageNo: 1,
           pageSize: 10,
           blocked: 0,
         };
         console.log("this.$route.query", query);
         // 如果第一次进入就在地址栏输入
         if (query) { 
           query.pageNo && (query.pageNo = Number(query.pageNo));
           query.pageSize && (query.pageSize = Number(query.pageSize));
           // 最终是url的参数覆盖初始化参数
           listQuery = { 
             ...listQuery,
             ...query,
           };
         }
         this.listQuery = listQuery;
         console.log("this.listQuery", this.listQuery);
       },

1.  ##### 路由监控 #####

`beforeRouteUpdate 当组件内子路由发生变化时，会触发该导航守卫。`

beforeRouteUpdate(to, from, next) { 
       if (to.path === from.path) { 
         const newQuery = Object.assign({ }, to.query);
         const oldQuery = Object.assign({ }, from.query);
         if (JSON.stringify(newQuery) !== JSON.stringify(oldQuery)) { 
           this.listQuery = newQuery;
           this.getList();
         }
       }
       next();
     },

图示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/8ef94bd5d44a45a19a0b4073a7be6673.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/5b8e841a09574868bc7ca40b6e6d2cfc.png