关于vue中element-UI中table的循环展示以及分页方式

vue中table多用到分页，有时会忘记怎么使用分页和循环展示表格

直接上代码：

父组件
<tableDate :dateTable="dateTable" :tableData="tableData"></tableDate>


js部分
export default {
    components: {
      searchBox,tableDate
    },
    data(){
      return{
        dateTable: [
          {"label":"序号","prop":"date","width":"50"},
          {"label":"批次","prop":"name","width":"180"},
          {"label":"车次","prop":"address","width":""},
          {"label":"供应商","prop":"address1","width":""},
          {"label":"矿点","prop":"address2","width":""},
          {"label":"煤种","prop":"address3","width":""},
          {"label":"重量","prop":"address4","width":""},
          {"label":"全水分(Mt)","prop":"address5","width":""},
          {"label":"操作日期","prop":"address6","width":""},
          {"label":"操作","prop":"address7","width":"120"}
        ],
        tableData :[
        {
                date: '1',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '3',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '4',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },
              {
                date: '5',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '6',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '7',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '8',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },
              {
                date: '9',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '10',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '11',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '12',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },
              {
                date: '13',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '14',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '15',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '16',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },
              {
                date: '17',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '18',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '19',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '20',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },
              {
                date: '21',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '22',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '23',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '24',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }
          ],
          
      }
    },
    methods: {
      
    },
  };

子组件
<template>
    <div id="tableDate">
      <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :page-size="pageSize"
        :current-page="currentPage"
        style="width: 100%">
        <template v-for="(item,index) in dateTable">
          <el-table-column v-if="item.label != '操作'"
            :prop="item.prop"
            :label="item.label"
            :width="item.width">
          </el-table-column>
          <el-table-column v-else-if="item.label == '操作'"
            :prop="item.prop"
            :label="item.label"
            :width="item.width">

            <template slot-scope="scope">
              <el-button
                size="mini"
                slot="reference"
                @click="dialogTableVisible = true"
                >详情</el-button>
              <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                  <el-table-column property="date" label="日期" width="150"></el-table-column>
                  <el-table-column property="name" label="姓名" width="200"></el-table-column>
                  <el-table-column property="address" label="地址"></el-table-column>
                </el-table>
              </el-dialog>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="yema">
        <el-pagination background
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"  
          :current-page="currentPage"  
          :page-sizes="[10,20,30,50,100]"
          :page-size="pagesize"   
          layout="total,jumper,prev, pager, next,sizes"
          :total="tableData.length" >
        </el-pagination>
      </div>
    </div>
</template>
<script>
    export default {
      props:['dateTable',"tableData"],//父组件数组的形式传过来的。
        data(){
          return{
            currentPage:1,
            pagesize:10, 
            tableData: [ ],
            dialogTableVisible: false,
            gridData: [
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }
            ],
            
          }
        },
        methods: {
          onSubmit() {
              var formItems=this.formInline
              console.log(formItems);
          },
          handleSizeChange(size){
              this.pagesize=size;
          },
          handleCurrentChange(currentPage){
              this.currentPage=currentPage;
          },	
        },
        computed: {
        },
        watch: {
          
        },
        
    };
</script>

页面运行结果：