vue 后台 之 简单的分页组件

vue 后台 之 简单的分页组件

Pagination.vue 分页器组件1

<!-- 一个简单的分页器组件 -->
<template>
  <div class="page_wrap">
    <div>
      每页<span>{{ comShowPage }}</span
      >条 共<span>{{ comTotal }}</span
      >条
    </div>
    <div
      class="firstPage"
      @click="firstPage"
      :class="{ prePageGray: comCurrentPage == 1 }"
    >
      首页
    </div>
    <div
      class="prePage"
      @click="prePage"
      :class="{ prePageGray: comCurrentPage == 1 }"
    >
      上一页
    </div>
    <div>
      <span>第</span>
      <input type="text" v-model="comCurrentPage" @keyup.enter="changePage" />
      <span>/ 页</span>
    </div>
    <div
      class="nextPage"
      @click="nextPage"
      :class="{ prePageGray: comCurrentPage >= comEndPage }"
    >
      下一页
    </div>
    <div
      class="lastPage"
      @click="lastPage"
      :class="{ prePageGray: comCurrentPage == comEndPage }"
    >
      尾页
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  components: {},
  props: {
    showPage: {
      type: Number,
      default() {
        return 10;
      },
    },
    total: {
      type: Number,
      default() {
        return 10;
      },
    },
    currentPage: {
      type: Number,
      default() {
        return 1;
      },
    },
    size: {
      type: Number,
      default() {
        return 10;
      },
    },
  },
  data() {
    return {
      comShowPage: this.showPage,
      comCurrentPage: this.currentPage,
      comTotal: this.total,
    };
  },
  computed: {
    comEndPage() {
      return parseInt(this.comTotal / this.comShowPage);
    },
  },
  methods: {
    firstPage() {
      this.comCurrentPage = 1;
      this.$emit("changePage", this.comCurrentPage);
    },
    prePage() {
      this.comCurrentPage = this.comCurrentPage - 1;
      if (this.comCurrentPage <= 0) {
        this.comCurrentPage = 1;
      }
      this.$emit("prePage", this.comCurrentPage);
    },
    nextPage() {
      this.comCurrentPage = this.comCurrentPage * 1 + 1;
      if (this.comCurrentPage >= this.comEndPage) {
        this.comCurrentPage = this.comEndPage;
      }
      this.$emit("nextPage", this.comCurrentPage);
    },
    // 修改 input的时候 点击回车键触发
    changePage() {
      this.$emit("changePage", this.comCurrentPage);
    },
    lastPage() {
      this.comCurrentPage = this.comEndPage;
      this.$emit("changePage", this.comCurrentPage);
    },
  },
};
</script>
<style  lang="scss" scoped>
/* 清除浮动 */
.clear_fix:after {
  content: ".";
  clear: both;
  height: 0;
  overflow: hidden;
  display: block;
  visibility: hidden;
}

.clear_fix {
  zoom: 1;
}
.page_wrap {
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  　-moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/

  .prePageGray {
    color: #ccc;
    cursor: not-allowed;
  }
  & > div {
    float: left;
  }

  input {
    padding-left: 10px;
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    line-height: 40px;
    outline: none;
    border: none;
    color: red;
  }
  & > div:nth-child(1) {
    & > span {
      padding: 0 5px;
    }
  }
  & > div:nth-child(2),
  & > div:nth-child(4) {
    padding: 0 10px;
  }
  & > div:nth-child(3) {
    & > span {
      padding: 0 5px;
    }
  }
  .lastPage{
    padding-left: 5px;
  }
}
</style>

使用分页器组件1

<template>
  <div>
    <Pagination
      :showPage="pages.showPage"
      :total="pages.total"
      :size="pages.size"
      :currentPage="pages.currentPage"
      @prePage="prePage"
      @nextPage="nextPage"
      @changePage="changePage"
    ></Pagination>
    page: {{ pages.page }} size: {{ pages.size }}
    <div>data: {{ list }}</div>
  </div>
</template>

<script>
import Pagination from "./Pagination";
export default {
  name: "home",
  components: { Pagination },
  data() {
    return {
      pages: {
        total: 100,
        showPage: 10,
        unit: 1,
        page: 1, //当前页码
        size: 10, //每页显示条目个数不传默认10
      },
      list: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$request
        .get(
          `/hx04/search?unit=${this.pages.unit}&pageNum=${this.pages.page}&pageSize=${this.pages.size}`
        )
        .then((res) => {
          console.log("res", res.data.dat.list[0].value);
          this.list = res.data.dat.list[0].value;
        });
    },
    prePage(val) {
      // console.log("上一页", val);
      this.pages.page = val;
      this.init();
    },
    nextPage(val) {
      // console.log("下一页", val);
      this.pages.page = val;
      this.init();
    },
    changePage(val) {
      // console.log("当前页", val);
      this.pages.page = val;
      this.init();
    },
  },
};
</script>
<style  lang="scss" scoped>
</style>

分页组件 样式2

<!-- 一个简单的分页器组件 -->
<template>
  <div class="page_wrap clear_fix">
    <div class="select_wrap">
      每页<span>{{ comShowPage }}</span
      >条 共<span>{{ comTotal }}</span
      >条
    </div>
    <div
      class="firstPage"
      @click="firstPage"
      :class="{ prePageGray: comCurrentPage == 1 }"
    >
      首页
    </div>
    <div
      class="prePage"
      @click="prePage"
      :class="{ prePageGray: comCurrentPage == 1 }"
    >
      上一页
    </div>
    <div class="pageCell clear_fix">
      <div
        v-for="(item, index) in comEndPage"
        :key="index"
        :class="{ active: comCurrentPage === index + 1 }"
        @click="changePage(index)"
      >
        {{ item }}
      </div>
    </div>
    <div
      class="nextPage"
      @click="nextPage"
      :class="{ prePageGray: comCurrentPage >= comEndPage }"
    >
      下一页
    </div>
    <div
      class="lastPage"
      @click="lastPage"
      :class="{ prePageGray: comCurrentPage == comEndPage }"
    >
      尾页
    </div>
    <div class="goto">
      <input type="text" v-model="inpValue" @keyup.enter="goTo" />
      <span @click="goTo">跳转</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  props: {
    showPage: {
      type: Number,
      default() {
        return 10;
      },
    },
    total: {
      type: Number,
      default() {
        return 10;
      },
    },
    currentPage: {
      type: Number,
      default() {
        return 1;
      },
    },
    size: {
      type: Number,
      default() {
        return 10;
      },
    },
  },
  data() {
    return {
      comShowPage: this.showPage,
      comCurrentPage: this.currentPage,
      comTotal: this.total,
      inpValue: "",
    };
  },
  computed: {
    comEndPage() {
      return parseInt(this.comTotal / this.comShowPage);
    },
  },
  methods: {
    firstPage() {
      this.comCurrentPage = 1;
      this.$emit("changePage", this.comCurrentPage);
    },
    prePage() {
      this.comCurrentPage = this.comCurrentPage - 1;
      if (this.comCurrentPage <= 0) {
        this.comCurrentPage = 1;
      }
      this.$emit("prePage", this.comCurrentPage);
    },
    nextPage() {
      this.comCurrentPage = this.comCurrentPage * 1 + 1;
      if (this.comCurrentPage >= this.comEndPage) {
        this.comCurrentPage = this.comEndPage;
      }
      this.$emit("nextPage", this.comCurrentPage);
    },
    // 修改当前页
    changePage(index) {
      console.log("index", index);
      this.comCurrentPage = index + 1;
      this.$emit("changePage", this.comCurrentPage);
    },
    lastPage() {
      this.comCurrentPage = this.comEndPage;
      this.$emit("changePage", this.comCurrentPage);
    },
    goTo() {
      this.changePage(this.inpValue - 1);
      this.inpValue = "";
    },
  },
};
</script>
<style  lang="scss" scoped>
/* 清除浮动 */
.clear_fix:after {
  content: ".";
  clear: both;
  height: 0;
  overflow: hidden;
  display: block;
  visibility: hidden;
}

.clear_fix {
  zoom: 1;
}
.page_wrap {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  　-moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/

  .prePageGray {
    color: #ccc;
    cursor: not-allowed;
  }
  & > div {
    float: left;
    padding: 0 5px;
    margin: 0 5px;
    border: 1px solid #000;
  }
  & > div:nth-child(1) {
    border: none;
  }
  .pageCell {
    border: none;
    padding: 0;
    background: #fff;
    & > div {
      float: left;
      margin-right: 5px;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border: 1px solid #ccc;
    }
    .active {
      background: pink;
      color: #fff;
    }
  }
  .goto {
    input {
      padding-left: 10px;
      height: 28px;
      line-height: 28px;
      width: 32px;
      border: none;
      outline: none;
      border-bottom: 1px solid #000;
      color: red;
    }
    span {
      padding-left: 5px;
    }
  }
}
</style>

使用样式2 分页器

<template>
  <div>
    <Pagination
      :showPage="pages.showPage"
      :total="pages.total"
      :size="pages.size"
      :currentPage="pages.currentPage"
      @prePage="prePage"
      @nextPage="nextPage"
      @changePage="changePage"
    ></Pagination>
  </div>
</template>

<script>
import Pagination from "./Pagination";
export default {
  name: "home",
  components: { Pagination },
  data() {
    return {
      pages: {
        total: 100,
        showPage: 10,
        unit: 1,
        page: 1, //当前页码
        size: 10, //每页显示条目个数不传默认10
      },
      list: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$request
        .get(
          `/hx04/search?unit=${this.pages.unit}&pageNum=${this.pages.page}&pageSize=${this.pages.size}`
        )
        .then((res) => {
          console.log("res", res.data.dat.list[0].value);
          this.list = res.data.dat.list[0].value;
        });
    },
    prePage(val) {
      // console.log("上一页", val);
      this.pages.page = val;
      this.init();
    },
    nextPage(val) {
      // console.log("下一页", val);
      this.pages.page = val;
      this.init();
    },
    changePage(val) {
      // console.log("当前页", val);
      this.pages.page = val;
      this.init();
    },
  },
};
</script>
<style  lang="scss" scoped>
</style>