elementUI分页封装--更新

elementUI分页封装--更新( 关联到后端接口，涉及到父组件触发子组件中的事件并处理异步 )

这里我用的是定时器解决的异步

都说人生没有通往成功捷径的直梯，正因如此永远不要对自己产生质疑

分页组件

<template>
  <div class="pagingDive">
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
        @click.native="pageClick()"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "paging",
  props: {
    pageCount: Object,//接收父组件传来的分页信息
    cardManagementVal: Array //接收父组件传来的所有数据
  },
  data() {
    return {
　　　　//props接收父组件传来的分页信息进行赋值用来下面操作
      limit: this.pageCount.limit,
      page: this.pageCount.page,
      total: this.pageCount.total,
      Ary: [] //定义一个空数组传给父组件
    };
  },

//监听

　watch: {
    total() {
      //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      if (this.total == (this.page - 1) * this.limit && this.total != 0) {
        //这一行是关键代码，倍数关系
        this.page -= 1;
        this.$emit("abcClick"); //获取表格数据的方法
      }
    }
  }

computed: {}, methods: {  handleCurrentChange(val) { this.page = val; }, handleSizeChange: function(size) { this.limit = size; },
　　//翻页的点击事件执行分页方法　　
    pageClick() {
      this.tablePagination();
    },
    tablePagination() {
      let array = [],
        startNum = 0,
        endNum = 0;
      this.total = this.cardManagementVal.length;
      startNum = (this.page - 1) * this.limit;
      if (this.page * this.limit < this.total) {
        endNum = this.page * this.limit;
      } else {
        endNum = this.total;
      }
      array = this.cardManagementVal.slice(startNum, endNum);
      this.Ary = array;//刚刚定义的新数组已经获取到了所有数据
      this.$emit("pageHandel", this.Ary); //把新数据通过自定义事件发送给父组件并执行更换
    }
  },
  created() {
　　//先执行分页方法获取到数据
    this.tablePagination();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.pagingDive {
  width: 100%;
  height: 140px;
  background: #fff;
  padding-left: 32px;
  padding-right: 32px;
  line-height: 140px;
  /deep/.el-pagination {
    display: flex;
    align-items: center;
    .el-pager,
    .el-pager li {
      vertical-align: middle;
    }
  }
}
</style>

---

 

调用分页组件

这里用到了ref和定时器、还有传值、调用子组件事件

千万不要忘了表格data绑定的值更换为在分页重新定义的数组

结构:

<Table border :columns="columns12" :data="Ary"></Table> <!-- 更换为新的数组也就是在分页方法中重新定义的 -->

<com-page
        :pageCount="pageCount" //将定义的分页值传给子组件
        :cardManagementVal="cardManagementVal" //将表格中的数据传给子组件
        @pageHandel="pageHandel" //接收子组件发送的方法并赋新值
        ref="myChild" //通过ref调用子组件中的分页方法用来显示数据
　　　　　@abcCilck="say()"

></com-page>

引入分页组件:

import Page from "../../common/paging/index.vue";
components: {"com-page": Page}

data中的定义：

pageCount: {
        limit: 8,//这里只需要定义一页显示多少条数据就可以了
        page: "",
        total: ""
},
Ary: [],//新数组也就是新数据在子组件定义的用来赋值绑定表格data中
cardManagementVal: [] //后端所有数据

事件：

//显示数据的接口
getList() {
      const req = {...};
      cardLook(req).then(res => {
        if (res.data.code == "200") {
          this.cardManagementVal = res.data.data.rows;//后端所有数据
          setTimeout(() => {//使用定时器解决异步调用子组件的分页方法
            this.myChild();
          }, 0);
          this.cardManagementVal.map(item => {});
        } else {
          return false;
        }
      });
},
//接收子组件传来的新数据并用于绑定到表格的data中
pageHandel(Val) {
      this.Ary = Val;
},
//通过ref获取到子组件并调用子组件中的分页方法用来显示数据
myChild() {
      this.$refs.myChild.tablePagination();
},
say(){
　　this.getList()
}
//直接执行显示数据的方法和接收子组件发送的自定义事件用来获取新数据
created() {
    this.getList();
    this.pageHandel();
　　this.myChild()

}