当ts与vue结合实现手写分页

前面的文章已经讲了一些关于ts的语法，那么今天就来说说ts与vue是怎么运用的且实现分页，这里就不讲怎么构建一个项目了，这是自己写的一个小的demo

1. 首先建立一个页面tableData.vue

 <el-table
      :data="currentPageList"
      border
      style="width: 100%"
      :height="tHeight"
      class="table-box"
    >
    //内容省略..................
    </el-table>
    //分页===================
    <Pagination
        v-if="flag"//这里加个判断，获取到值时再传值
        :total="total"
        :limit="limit"
        @sendvalue="propMsg"
        @limitNum="limitMsg"
      ></Pagination>
  //ts部分  一定要写上lang='ts'  
<script lang="ts">
 import { Component, Vue, Provide } from "vue-property-decorator";
 import Pagination from "@/components/pagination.vue";

@Component({
  components: { Pagination },
})
export default class TableData extends Vue {
//以前我们把数据存储到data里面 现在使用ts后 使用装饰器 Provide 存储
  @Provide() flag: boolean = false; //判断接口是否获取值
  @Provide() tHeight: number = document.body.offsetHeight - 270;
  @Provide() tableData: any = []; // 表格数据
  @Provide() limit: number = 2; // 请求数据的个数每页限制的条数
  @Provide() total: number = 0; // 总数据条数
  // 计算属性这样表示
 // get computedData(): any {}
 created() {
    this.loadData();
  }
 //获取数据===
  loadData() {
    return new Promise((resolve, reject) => {
      (this as any).$axios
        .get("http://localhost:8000/addClass")
        .then((res: any) => {
          this.tableData = res.data;
          this.total = res.data.length;
          //这里运用是等数据获取到，再传值到子组件中，不然子组件获取的是初始值total=0
          this.flag = true;
          resolve(this.tableData);
        });
    });
 }
  // 接受子组件传来的页码值
  propMsg(value) {
    this.loadData().then((data) => {
      this.currentPageList = this.tableData.slice(value, value + this.limit);
      });
    }
    // 接受子组件传过来的几条/页
  limitMsg(value) {
    this.limit = value;
    this.loadData().then(() => {
    this.currentPageList = this.tableData.slice(0, this.limit);
      });  
    }
</script>

2.封装 Pagination 分页部分

<template>
  <div class="pagination">
    <ul id="page">
      <select
        v-model="selectValue"
        id="selectOPtion"
        @change="handleChange($event)"
      >
        <option :value="item.name" v-for="item in optionsList" :key="item.id">
          {{ item.name }}
        </option>
      </select>
      <li
        class="pageNum"
        @click="goprePage"
        :class="{ active: currentPage == 1 }"
      >
        &laquo;
      </li>
      <li
        class="pageNum"
        v-for="(item, index) in buttonNum"
        :key="index"
        :class="{ activeclass: item === currentPage }"
        @click="hanldeClick(item)"
      >
        <a v-if="item"> {{ item }}</a>
        <a v-else>...</a>
      </li>
      <li
        class="pageNum"
        @click="gonextPage"
        :class="{ active: currentPage == totalPage }"
      >
        &raquo;
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Prop, Emit } from "vue-property-decorator";
@Component({})
export default class Charts extends Vue {
  @Provide() offset: number = 0;
  @Provide() optionsList: any = [
    { id: 1, name: "2条/页" },
    { id: 2, name: "5条/页" },
    { id: 3, name: "8条/页" },
  ];
  @Provide() selectValue: string = "2条/页"; //默认是2条/页
  //父组件传过来的总数量及一页每条数据
  @Prop({ type: Number, default: "" }) total!: number;
  @Prop(Number) limit: number;
  //传到父组件  设置的方法属性
  @Emit("sendvalue") sendOffset(offset: number) {}
  // 切换几条/页到父组件
  @Emit("limitNum") sendvalue(limit: number) {}
  // 总页数
  get totalPage(): any {
    return Math.ceil(this.total / this.limit);
  }
  //当前页
  get currentPage() {
    // console.log(Math.ceil(this.offset / this.limit) + 1);
    return Math.ceil(this.offset / this.limit) + 1;
  }
  //上页
  get prePage() {
    return this.offset !== 0 && this.total;
  }
  //下页
  get nextPage() {
    return this.offset + this.limit < this.total && this.total;
  }
  // 页码的显示button
  get buttonNum() {
    const pageNum = this.totalPage;
    const currentPage = this.currentPage;
    if (pageNum <= 3) return [...new Array(pageNum)].map((v, i) => i + 1);
    if (currentPage <= 2) return [1, 2, 3, 0, pageNum];
    if (currentPage >= pageNum - 1)
      return [1, 0, pageNum - 2, pageNum - 1, pageNum];
    if (currentPage === 3) return [1, 2, 3, 4, 0, pageNum];
    if (currentPage === pageNum - 2)
      return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
    return [1, 0, currentPage - 1, currentPage, currentPage + 1, 0, pageNum];
  }
  created() {
    //初始值传过去截取的数据
    this.sendOffset(this.offset);
  }
  //methods
  //点击button每一个页码
  hanldeClick(i) {
    // console.log(i);
    if (i == this.currentPage || i == 0) return;
    this.offset = (i - 1) * this.limit;
    this.sendOffset(this.offset); //传到父组件从什么位置截取
  }
  // 向前一页==
  goprePage() {
    if (!this.prePage) return;
    //5   5
    this.offset -= this.limit;
    this.sendOffset(this.offset); //传到父组件
  }
  // 向后一页===
  gonextPage() {
    if (!this.nextPage) return;
    this.offset += this.limit;
    this.sendOffset(this.offset); //传到父组件
  }
  // 切换页数
  handleChange(event) {
    let val = event.target.value;
    let numArr = parseInt(val.match(/\d+/g).join(""));
    // 每次切换时，让offset值为0，
    this.offset = 0;
    //转换成数字传到父组件中限制的页码。
    this.sendvalue(numArr);
  }
}
</script>
<style lang="scss" scoped>
#page {
  display: flex;
  justify-content: flex-end;
  .pageNum {
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #f4f4f5;
    margin-left: 5px;
    border: 2px solid #f4f4f5;
  }
  .activeclass {
    border-color: #409eff;
    background: #409eff;
    color: #ffff;
  }
  .active {
    color: #c2c4cc;
  }
  #selectOPtion {
    border-color: #c2c4cc;
  }
}
</style>

整个效果下来就是这样的