element ui 静态数据分页

1. 结构部分

            <el-table
              ref="tbTable"
              :data="tbTableData.slice((tbPage.currentPage-1) * tbPage.pagesize, tbPage.currentPage * tbPage.pagesize)"
              border
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column prop="name" align="center" min-width="200" label="名称" show-overflow-tooltip />
              <el-table-column prop="type" align="center" min-width="200" label="属性" show-overflow-tooltip />
            </el-table>

            <el-pagination
              :current-page.sync="tbPage.currentPage"
              :page-sizes="tbPage.pageSizes"
              :page-size.sync="tbPage.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tbTableData.length"
              class="t_center"
            ></el-pagination>

 

2. 数据部分

export default {
  data() {
    return {
      tbTableData: [],
      tbPage: {
        currentPage: 1,
        pagesize: 10,
        pageSizes: [10, 30, 50, 100]
      }
    }
  }
}