暑期项目实训记录-3

（一）分工及需求确定

PC端开发小组根据需求进行了分工，其中我主要负责黑名单管理和用户管理，以下是这两部分的具体需求：

1、黑名单管理

用来限制某些用户不能进行指定选座活动的选座操作。

①添加黑名单： 添加用户到黑名单中，指定该用户不能参加的选座活动。 

一种方式：系统的自动加入黑名单，并微信小程序通知用户，每次教学完成签到人 员统计时，计算未签到的人是否已经违规占座 3 次。 

二种方式：管理员手动加入黑名单，限制某些或者某个人员选座。（注：支持单个添 加和批量）

添加黑名单的权限设置：限制部分活动选座或者限制全部活动的选座。

②解除黑名单： 

解除黑名单限制。（注：支持单个解除和批量解除）

2、用户管理

用于管理所有注册的用户。

主要字段：用户名、用户昵称、用户状态（是否黑名单用户）、参加活动数、报修座位次数、注册时间。

（二）大致设计构想

根据黑名单管理和用户管理这两个模块的需求，主要的一部分工作是要向管理员展示用户的信息和黑名单人员的信息，这些将以表格的方式呈现，因此首先了解element组件中table的用法。考虑到管理员能够对用户进行批量操作，因此需要用到复选框。带有复选框的table使用实例：

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

 对以上代码进行学习，构建自己所需要的信息表格。