对element ui中的分页组件进行二次封装

本节要掌握的几个概念

• sync

一、子组件怎么向父组件传值

通过$emit向父组件派发一个事件并传递参数

            handleSizeChange(val = this.limit) {
                this.$emit("update",val);
            },

父组件中只需要接受这个事件并处理就行了

v-on:update = "pagesize = $event"

也可以写成这样

            handleSizeChange(val = this.limit) {
                this.$emit("update:limit",val);
            },

v-on:update:limit = "pagesize = $event"

而这样的写法被封装成了一个语法糖，在父组件中可以使用.sync来代替,这样就可以获得子组件传递过来的值了。（$event是固定写法，代表从子组件中传递过来的值）

:limit.sync = "pagesize"

所以sync的作用与v-on:update:limit = "pagesize = $event"这段代码的作用是一样的，只不过更简洁了。

二、封装分页组件

自定义的分页组件

<template>
    <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="pagesizes"
            :page-size.sync="limit"
            :layout="layout"
            :total="total"
            >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            page: {
                type : Number,
                default : 1
            },
            // 每页显示条目数
            pagesize : {
                type:Number,
                default : 1
            },

            pagesizes : {
                type:Array,
                default() {
                    return [1,2,3,4]
                }
            },
            layout : {
                default :"total, sizes, prev, pager, next, jumper"
            },
            total : {
                required : true,
            }
        }
        ,
        computed: {
            currentPage: {
                get() {
                    return this.page;
                },
                set(val) {
                    this.$emit("update:page",val);
                }
            },
            limit: {
                get() {
                    return this.pagesize;
                },
                set(val) {
                    this.$emit("update:limit",val);
                }
            }
        },
        data()  {
            return {
                
            }
        },
        methods: {
            handleSizeChange(val = this.limit) {
                this.$emit("changeSize",val);
            },
            handleCurrentChange(val = this.currentPage) {
                this.$emit("change",val);
            }
        },
    }
</script>

<style scoped>

</style>

在父组件中应用子组件，由于没有后台，这边是在前端做了一个假分页

<template>
  <div>
    <el-table :data="tableDataCopy" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <Pagination 
      :limit.sync = "pagesize"
      :page.sync = "currentPage"
      @change="handleCurrentChange"
      :total = 'total'
      @changeSize = "handleSizeChange"
      @update = "pagesize = $event,show"
    >
    </Pagination>
  </div>
</template>                                
                                          
<script>
import Pagination from "../../components/pagination"
export default {
  data() {
    return {
      currentPage: 1,
      pagesize:1,
      pagesizes:[1,2,3,4],
      tableDataCopy:[],
      total: 4,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "zhangsan",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "er",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小ha",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  components: {
    Pagination,
  },
  methods: {
    show() {
      console.log(this.pagesize);
    },
    getlist(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.tableDataCopy = this.tableData.slice(0,this.pagesize);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      if(val < this.tableData.length / this.pagesize ){
        console.log("haha");
        this.tableDataCopy = this.tableData.slice((this.currentPage4-1) * this.pagesize,this.currentPage4* this.pagesize);
        console.log(this.tableDataCopy);
      }else {
        console.log((this.currentPage4-1) * this.pagesize);
        this.tableDataCopy = this.tableData.slice((this.currentPage4-1) * this.pagesize);
      }
      console.log(`当前页: ${val}`);
    },
    change() {
      console.log(this.currentPage);
    }
  },
  created () {
    this.tableDataCopy = this.tableData.slice(0,this.pagesize);
  }
};
</script>

<style scoped>
</style>

总结

重点要掌握sync的用法