暑期项目实训记录-5

今日目标:

1.表格实现分页效果

2.点击<加入黑名单>按钮,弹出drawer可供选择限制的活动

工作详情:

1.element中有直接可使用的分页控件,其中的一些属性:

current-page:当前页数，支持 .sync 修饰符

page-size:每页显示条目个数，支持 .sync 修饰符

page-sizes:每页显示个数选择器的选项设置

layout:组件布局，子组件名用逗号分隔

此外定义两个方法,对于每页展示的数据条数进行改变,以及对当前页数进行改变

<!-- 表格分页 -->
    <div class="pagination">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="userData.length">，
      </el-pagination>
    </div>

<el-table
            ref="multipleTable