静态elementUI 表格+分页器 展示数据

<template>
  <div>
    <el-table
            ref="filterTable"
            :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)">
      <el-table-column
              prop="date"
              label="创建日期"
              sortable
              width="180"
              column-key="date">
      </el-table-column>   
      <el-table-column prop="createBy" label="创建人" :formatter="createBy"></el-table-column>
      
      <el-table-column
              align="left">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEnter(scope.$index, scope.row)">Enter</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background
                   layout="prev, pager, next, sizes, total, jumper"
                   :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    :total="this.tableData.length"
                    @current-change="handleCurrentChange"
                   @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "select",
    data() {
      return {
        pagesize: 10,
        currpage: 1,
        tableData: []
      }
    },
    created() {
      this.tableData = [
        {
          id: '001',
          date: '2016-05-02',
          createby: 'xxxx',
        }]
    },
    methods: {
      // 数据填充
      createBy(row, column) {
        return row.createby;
      },

      // 切换页 方法
      handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },

      // 进入某个选项
      handleEnter(index, row) {
        console.log(row.id)
      },
    }
  }
</script>

<style scoped>
  .el-table {
    width: 100%;
  }

  .el-pagination {
    margin-top: 20px;
    margin-left: 10px;
  }
</style>
————————————————
版权声明：本文为CSDN博主「ttt_tangyuan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/tangyuan0217/article/details/104432574