1. 程式人生 > 其它 >element ui 靜態資料分頁

element ui 靜態資料分頁

1. 結構部分

            <el-table
              ref="multipleTable"
              :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]
      }
    }
  }
}