其他分享
首页 > 其他分享> > 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]
      }
    }
  }
}

 

标签:静态数据,10,return,pagesize,tbTableData,default,element,ui
来源: https://www.cnblogs.com/ysxq/p/15598485.html