vue对el-table和el-pagination组件二次封装

之前都是封装的echarts组件实例，因为有项目很多地方都是用的element table，所以自己尝试封装一下element-table和el-pagination，没有封装过element-table组件，所以写了个大概的组件封装，供以后工作学习参考......

  父组件代码：

<template>

  <div>

    <div class="table">

      <table-page

        :data="data"

        :columns="columns"

        :pageSize="pageSize"

        :pageSizes="pageSizes"

        :total="total"

        :currentPage="currentPage"

        @changePage="handlePageChange"

      ></table-page>

    </div>

  </div>

</template>



<script>

import TablePage from './component/TablePage.vue';

export default {

  name: 'Main',

  components: { TablePage },

  data() {

    return {

      data: [{

        date: '2016-05-02',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1518 弄'

      }, {

        date: '2016-05-04',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1517 弄'

      }, {

        date: '2016-05-01',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1519 弄'

      }, {

        date: '2016-05-03',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1516 弄'

      }],

      columns: [

        {

          prop: 'date',

          label: '日期'

        },

        {

          prop: 'name',

          label: '姓名'

        },

        {

          prop: 'address',

          label: '地址'

        }

      ],

      total: 0,

      currentPage: 1,

      pageSize: 10,

      pageSizes: [10, 20, 50, 100]

    }

  },

  mounted() {

    this.getNewData()

  },

  methods: {

    handlePageChange(pageSize, currentPage) {

      this.pageSize = pageSize;

      this.currentPage = currentPage;

      this.getNewData();

    },

    getNewData() {

      var params = {

        pageSize: this.pagesize,

        pageNum: (this.currentPage - 1) * this.pagesize

      };

      this.$axios.get("/XXXX/xxxx", { params: params }).then(data => {

        this.data= data.responseData.data;

        this.total = data.responseData.totalNum;

      });

    },

  }

}

</script>



<style scoped>

.table {

  width: 50%;

  margin: auto;

  border: 1px solid darkred;

}

</style>

子组件代码：

<template>

  <div>

    <el-table :data="data" style="width: 100%">

      <el-table-column

        :columns="columns"

        v-for="item in columns"

        :key="item.prop"

        :prop="item.prop"

        :label="item.label"

      >

      </el-table-column>

    </el-table>



    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :page-sizes="pageSizes"

      :page-size="pageSize"

      :current-page="currentPage"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

    >

    </el-pagination>

  </div>

</template>



<script>

export default {

  name: 'TablePage',

  props: {

    data: {

      type: Array

    },

    columns: {

      type: Array

    },

    total: {

      type: Number

    },

    pageSize: {

      type: Number

    },

    currentPage: {

      type: Number

    },

    pageSizes: {

      type: Array

    }

  },

  data() {

    return {

    }

  },

  methods: {



    handleSizeChange(pageSize) {

      this.$emit('changePage', pageSize, this.currentPage)

    },

    handleCurrentChange(currentPage) {

      this.$emit('changePage', this.pageSize, currentPage)

    }

  }

}

</script>