自定义分页 element-ui 分页 分页样式修改 封装分页

由于每个框架分页不一致，也受使用场景限制，所以有了以下手写分页

1、HTML

1、父组件

<div style="border: 1px solid #ddd; height: 45px; position: relative">
      <pagination
        @NumberOf="NumberOf"
        @methodsCurrentPageCount="methodsCurrentPageCount"
        :NumberOfDisplays="pageSize"
        :CurrentPageCount="pageNum"
        :total="total"
      ></pagination>
    </div> 

1、子组件

<div class="paging">
      <!-- 分页左侧 -->
      <div class="paging_left">
        <!-- 第一页 -->
        <li style="width: 30px" @click="firstPage">
          第一页
          <!-- <img style="width: 16px; height: 16px;"
          :src="ziCurrentPageCount <= 1 ? require('@/assets/page.png') : require('@/assets/page1.png')" alt=""> -->
        </li>
        <!-- 上一页 -->
        <li style="width: 30px" @click="previousPage">
          上一页
          <!-- <img style="width: 16px; height: 16px;"
          :src="ziCurrentPageCount <= 1 ? require('@/') : require('@/assets/page3.png')" alt=""> -->
        </li>
        <!-- 竖杆 -->
        <li style="width: 30px; color: #c7c7c6">|</li>
        <!-- input框 -->
        <li>
          <input
            type="text"
            v-model="ziCurrentPageCount"
            @change="methodsCurrentPageCount()"
            style="width: 40px; height: 65%; text-align: center"
          />
        </li>
        <!-- 共多少页 -->
        <li
          style="font-size: 15px; width: 60px; margin-left: 5px; color: #5f5f5f"
        >
          共{{ HowManyPages }}页
        </li>
        <!-- 竖杆 -->
        <li style="width: 30px; color: #c7c7c6">|</li>
        <!-- 下一页 -->
        <li style="width: 30px" @click="nextPage">
          下一页
          <!-- <img style="width: 16px; height: 16px;"
          :src="ziCurrentPageCount >= HowManyPages ? require('@/assets/page4.png') : require('@/assets/page5.png')" alt=""> -->
        </li>
        <!-- 最后一页 -->
        <li style="width: 30px" @click="theLastPage">
          最后一页
          <!-- <img style="width: 16px; height: 16px;"
          :src="ziCurrentPageCount >= HowManyPages ? require('@/assets/page6.png') : require('@/assets/page7.png')" alt=""> -->
        </li>
        <!-- 显示条数 -->
        <li
          style="
            width: 35px;
            height: 100%;
            position: relative;
            margin-left: 5px;
          "
          @click="dropDown()"
        >
          <button
            style="
              width: 100%;
              height: 70%;
              background-color: white;
              border: 0 solid;
              text-align: left;
              padding: 2px;
            "
          >
            {{ ziNumberOfDisplays }}
          </button>
          <!-- <img src="@/assets/up.png" alt="" style="width: 10px; height: 10px; position: absolute; right: 3px; "> -->
          <!-- 下拉框开始 -->
          <ul
            style="
              width: 50px !important;
              text-align: center;
              font-size: 13px;
              position: absolute;
              top: -56px;
              left: -3px;
              border: 1px solid #000;
              background-color: white;
              margin: 0;
              padding: 0;
              z-index: 999;
            "
            v-show="dropDownBox"
          >
            <li
              :class="{ drio_down_box_li: ziNumberOfDisplays == 15 }"
              style="width: 100%; height: 18px"
              @click="NumberOf(10)"
            >
              10
            </li>
            <li
              :class="{ drio_down_box_li: ziNumberOfDisplays == 30 }"
              style="width: 100%; height: 18px"
              @click="NumberOf(20)"
            >
              20
            </li>
            <li
              :class="{ drio_down_box_li: ziNumberOfDisplays == 50 }"
              style="width: 100%; height: 18px"
              @click="NumberOf(30)"
            >
              30
            </li>
          </ul>
          <!-- 下拉框结束 -->
        </li>
      </div>
      <!-- 分页右侧 -->
      <div class="paging_right">
        <!-- 总共多少条数据 -->
        <li style="font-size: 14px; margin: 0 20px 0 20px">共{{ total }}条</li>
        <!-- 当前显示数量 -->
        <li style="font-size: 14px">
          {{
            ziCurrentPageCount - 1 == 0
              ? 1
              : (ziCurrentPageCount - 1) * ziNumberOfDisplays
          }}
          - {{ ziCurrentPageCount * ziNumberOfDisplays }}
        </li>
      </div>
    </div>

2、数据

引入子组件

import pagination from "../components/k.vue";

把数据通过props传递过来 

props: {
    // 显示条数
    NumberOfDisplays: {
      type: Number,
      default: 15,
    },
    // 当前页数
    CurrentPageCount: {
      type: [Number, String],
      default: 1,
    },
    // 共多少条
    total: {
      type: Number,
      default: 999,
    },
  },
  name: "",

 父组件内定义的数据

 pageNum: 1, // 父
      pageSize: 3, // 父

子组件定义的数据

 // 显示隐藏
       dropDownBox: false, // 子
      // 显示条数
      ziNumberOfDisplays: this.NumberOfDisplays, // 子
      // // 共多少页
      // HowManyPages: 1,
      ziCurrentPageCount: this.CurrentPageCount, // 子

 通过子组件的computed实现

 computed: {
    HowManyPages() {
      return Math.ceil(this.total / this.ziNumberOfDisplays);
    },
  },

 在子组件使用watch监听

 // 子
  watch: {
    CurrentPageCount() {
      this.ziCurrentPageCount = this.CurrentPageCount;
    },
    NumberOfDisplays() {
      this.ziNumberOfDisplays = this.NumberOfDisplays;
    },
  },

3、操作

父组件的函数操作，上一页 下一页的变化

// 下一页
    methodsCurrentPageCount(res) {
      this.pageNum = res;
      console.log(this.panList1, "this.panList1");
      console.log(this.panList, "this.panList");
      this.panList = this.panList1.slice(
        this.pageNum - 1 * this.pageSize,
        this.pageNum * this.pageSize
      );
      console.log(this.panList1, "this.panList1");
      console.log(this.panList, "this.panList");
      // this.render1();
    },
    // 上一页
    NumberOf(res) {
      this.pageSize = res;
      console.log(this.pageSize, res);
      // console.log(this.panList1);
      // 分页公式 slice(页数-1*每页几条，页数*每页几条)
      this.panList = this.panList1.slice(
        this.pageNum - 1 * this.pageSize,
        this.pageNum * this.pageSize
      );
      // this.render1();
    },

子组件实现下拉框的选择， 开启关闭下拉框 第一页 上一页 最后一页

 

// 开启关闭下拉框
    dropDown() {
      // this.$emit('dropDown')
      this.dropDownBox = !this.dropDownBox;
    },
    // 下拉框选择显示条数
    NumberOf(res) {
      console.log(res);
      this.$emit("NumberOf", res);
    },
    methodsCurrentPageCount() {
      this.$emit("methodsCurrentPageCount", this.ziCurrentPageCount);
    },
    // 第一页
    firstPage() {
      this.CurrentPageCount <= 1
        ? console.log("已到第一页")
        : this.$emit("methodsCurrentPageCount", 1);
    },
    // 上一页
    previousPage() {
      if (this.CurrentPageCount <= 1) {
        console.log("已到第一页");
      } else {
        this.ziCurrentPageCount--;
        this.$emit("methodsCurrentPageCount", this.ziCurrentPageCount);
      }
    },
    // 下一页
    nextPage() {
      if (this.CurrentPageCount >= this.HowManyPages) {
        console.log("已到第一页");
      } else {
        this.ziCurrentPageCount++;
        this.$emit("methodsCurrentPageCount", this.ziCurrentPageCount);
      }
    },
    // 最后一页
    theLastPage() {
      if (this.CurrentPageCount >= this.HowManyPages) {
        console.log("已到第一页");
      } else {
        this.$emit("methodsCurrentPageCount", this.HowManyPages);
      }
    },

4、样式

这是子组件的部分样式

<style scoped lang='scss'>
.paging {
  width: 100%;
  height: 44px;
  margin: 0 auto;
  border-radius: 5px;
  position: absolute;
  bottom: 30px;
  top: 0;
  left: 0px;
  border: 1px solid #c6c1c3;
  list-style: none;
}

.paging .paging_left {
  width: 70%;
  height: 100%;
  float: left;
}

.paging .paging_left li {
  float: left;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paging .paging_left li .drio_down_box_li {
  background-color: #1e91fb;
  color: white;
}

.paging_right {
  width: 30%;
  height: 100%;
  float: right;
  color: #5f5f5f;
}

.paging_right li {
  line-height: 40px;
  float: right;
}
</style>

到这就可以实现一个完整的分页，如有不懂可私信，感谢各位的观看！！！