elementUI分页测试页面简单封装

elementUI分页简单封装( 自己写的数据没有接口 )

样式只是UI框架中的样式，没有改为什么没改因为不会改。。。简单的封装了下,太深的操作还没有领悟到

封装一点一点学，代码一点一点优化

 注：不要忘了更换数据也就是表格绑定的那个数组

 表格组件( 注释全部都在代码上了 )

<template>
  <div>
    <!-- 表格数据 -->
    <el-table style=" 100%;" :data="ary">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="编号" prop="age" width="180"></el-table-column>
      <el-table-column
        label="用户姓名"
        prop="name"
        width="180"
      ></el-table-column>
      <el-table-column label="爱好" prop="like" width="180"></el-table-column>
    </el-table>
    <!-- 引入组件 -->
    <!-- 把分页的值、表格绑定的所有值传给子组件用于分页操作 -->
    <!-- 接收子组件的事件进行触发更改表格绑定的值是个数组 -->
    <cop-page :pageCount="pageCount" :listVal="list" @boom="boom"></cop-page>
  </div>
</template>

<script>
import "element-ui/lib/theme-chalk/index.css";
import "iview/dist/styles/iview.css";
import coPpage from "./cc/index.vue";
export default {
  components: { "cop-page": coPpage },
  watch: {},
  props: {},
  data() {
    return {
      // 表格数据
      list: [
        {
          name: "1",
          age: 11,
          like: "我"
        },
        {
          name: "2",
          age: 12,
          like: "饿"
        },
        {
          name: "3",
          age: 13,
          like: "了"
        },
        {
          name: "4",
          age: 14,
          like: "真"
        },
        {
          name: "5",
          age: 15,
          like: "饿"
        },
        {
          name: "6",
          age: 16,
          like: "了"
        }
      ],
      // 定义的分页 传给子组件
      pageCount: {
        pageList: 3, //每页显示多少条
        currentPage1: 1, //当前页
        total: 6 //总数量
      },
      ary: [] //准备更换表格绑定的数据 在分页操作后更换
    };
  },
  computed: {},
  methods: {
    // 触发子组件传来的方法 更改表格绑定的值
    boom(Val) {
      this.ary = Val;
    }
  },
  created() {
    // 直接执行
    this.boom();
  },
  mounted() {}
};
</script>
<style lang="scss" type="text/css" scoped></style>

分页组件( 注释全部都在代码上了 )

<template>
  <!-- 分页组件 -->
  <div class="block">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="pageList"
      layout="total, prev, pager, next"
      :total="total"
      @click.native="pageFunction()"
    ></el-pagination>
  </div>
</template>

<script>
import "element-ui/lib/theme-chalk/index.css";
import "iview/dist/styles/iview.css";
export default {
  components: {},
  // 接收父组件传来的分页值和表格绑定的数组值
  props: {
    pageCount: Object,
    listVal: Array
  },
  data() {
    return {
      pageList: this.pageCount.pageList, //绑定父组件传来的每页数量
      currentPage1: this.pageCount.currentPage1, //绑定父组件传来的当前页
      total: this.pageCount.total, //接收父组件传来的数量总数
      // 定义一个空数组用于存放新的表格数据  并传回去
      ary: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleCurrentChange(val) {
      //当前页
      this.currentPage1 = val;
    },
    handleSizeChange: function(size) {
      //每页条数每页下拉显示数据
      this.pageList = size;
    },
    // 表格数据分页的方法
    tablePagination() {
      let array = [],
        startNum = 0,
        endNum = 0;
      this.total = this.listVal.length;
      startNum = (this.currentPage1 - 1) * this.pageList;
      if (this.currentPage1 * this.pageList < this.total) {
        endNum = this.currentPage1 * this.pageList;
      } else {
        endNum = this.total;
      }
      array = this.listVal.slice(startNum, endNum);
      this.ary = array; //给新数组赋值并替换绑定 这个时候的ary就是表格中的所有数据
      // 发送自定义事件并把新的表格数据传过去
      this.$emit("boom", this.ary);
    },
    // 翻页事件
    pageFunction() {
      // 执行表格数据分页的方法
      this.tablePagination();
    }
  },
  created() {
    this.tablePagination();
  },
  mounted() {}
};
</script>
<style lang="scss" type="text/css" scoped></style>