暑期项目实训记录-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"
            tooltip-effect="dark"
            class="table"
            @selection-change="handleSelectionChange"
            :data="userData.slice((currentPage-1)*pagesize,currentPage*pagesize)" >

实现效果:

2.点击<加入黑名单>按钮弹出drawer

直接使用ｅｌｅｍｅｎｔ组件，在ｄｒａｗｅｒ的面板上添加复选框．以下为实现代码：

<!-- 选择限制活动的框 -->
    <el-drawer
            title="请选择限制参加的活动"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose">
      <div class="drawer_checkbox">
        <el-checkbox-group v-model="SelectActivities">
          <el-checkbox label="全部"></el-checkbox><br>
          <el-checkbox label="活动 A"></el-checkbox><br>
          <el-checkbox label="活动 B"></el-checkbox><br>
          <el-checkbox label="活动 C"></el-checkbox><br>
          <el-checkbox label="活动 D"></el-checkbox><br>
        </el-checkbox-group>
      </div>
      <div class="drawer_footer">
        <el-button
                type="primary"
                size="mini"
                @click="drawer=false">提交</el-button>
        <el-button
                size="mini"
                @click="drawer=false">取 消</el-button>
      </div>
    </el-drawer>

实现效果：