今日目标:
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;
}
实现效果:
一般状态:
点击<批量操作>按钮: