zoukankan      html  css  js  c++  java
  • element ui 静态数据分页

    1. 结构部分

                <el-table
                  ref="tbTable"
                  :data="tbTableData.slice((tbPage.currentPage-1) * tbPage.pagesize, tbPage.currentPage * tbPage.pagesize)"
                  border
                  tooltip-effect="dark"
                  style=" 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]
          }
        }
      }
    }
  • 相关阅读:
    骑行封龙山
    静夜
    骑行伏羲台
    我?
    生活挺好
    多事之秋,大家注意安全
    看不到啊看不到
    个人时间管理
    给DataGrid设置中文列名
    食用油是那么让人又爱又恨!
  • 原文地址:https://www.cnblogs.com/ysxq/p/15598485.html
Copyright © 2011-2022 走看看