暑期项目实训记录-4

今日目标：

1、实现基本的用户信息展示表格

2、添加<批量操作>的按钮，设置隐藏复选框，点击此按钮显示复选框并展示<加入黑名单>的按钮

工作详情：

1、创建表格使用<el-table>标签，创建列使用<el-table-column>.prop属性对应列内容的字段名，也可以使用 property 属性,用于传递数据.

以下是实现代码:

<!-- 表格区域 -->
    <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            class="table"
            @selection-change="handleSelectionChange" >
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              prop="openid"
              label="用户id"
              width="120"
              align="center">
      </el-table-column>
      <el-table-column
              prop="username"
              label="用户昵称"
              width="120"
              align="center">
      </el-table-column>
      <el-table-column
              prop="isblacklist"
              label="用户状态"
              width="120"
              align="center">
      </el-table-column>
      <el-table-column
              prop="activitynum"
              label="参加活动数"
              width="120"
              align="center">
      </el-table-column>
      <el-table-column
              prop="repairnum"
              label="报修座位次数"
              width="130"
              align="center">
      </el-table-column>
      <el-table-column
              prop="register_time"
              label="注册日期"
              align="center"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column
              align="right">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">加入黑名单</el-button>
        </template>
      </el-table-column>
    </el-table>

实现效果如图:

2.实现隐藏与展示复选框的效果

只需要添加一个方法,添加一个flag,点击<批量操作>按钮,即可转换flag的真假状态,在表格对应的复选框一列改变v-if的状态

v-if=this.flag

multipleIsShow(){                     //是否为批量操作状态
        this.flag=!this.flag;
        if (this.btn_name_user==='批量操作'){
          this.btn_name_user='取消批量操作';
          this.addblack=true;
        }else {
          this.btn_name_user='批量操作';
          this.addblack=false;
        }

实现效果:

一般状态:

点击<批量操作>按钮: