静态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>
    ————————————————
    版权声明：本文为博主「ttt_tangyuan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    原文链接：