用户管理页面禁止删除自己

每个后台管理项目应该都会有用户管理页面
首先得逻辑就是不能对自己当前所登录的那条用户记录进行删除
我们可以用一个element里面一个很简单的特性来规避这件事

就是按钮的禁用状态
当选择到自身的时候，就对删除的按钮使用禁用状态即可

<div class="grid-content" style="margin-top:30px;">
  <!-- 查询 -->
  <ul class="btn-edit fl">
     <li class="input-search">
         <el-input :placeholder="placeholder" v-model="keywords" style="width: 300px;" size="small">
        <el-select v-model="select" @change="searchFieldChange" slot="prepend" style="width:100px;" >
            <el-option label="用户名" value="username"></el-option>
            <el-option label="姓名" value="name"></el-option>
            <el-option label="电话" value="phone"></el-option>
        </el-select>
         <el-button type="danger" class="danger" slot="append" icon="el-icon-search" @click="query"></el-button>
                            </el-input>
                        </li>
                    </ul>
                    <!-- 操作 -->
                    <ul class="btn-edit fr">
                        <li >
                            <el-button type="primary" @click="dialogCreateVisible = true"  size="small"> <i class="el-icon-plus iconss"></i>添加用户</el-button>
                            <el-button type="danger" icon="delete" :disabled="banSelects()" @click="removeUsers()" size="small">删除</el-button>
                            <el-button type="warning" @click="enabledUsers(false)" :disabled="selected.length==0" size="small"> <i class="el-icon-close iconss" ></i>停用</el-button>
                            <el-button type="success" @click="enabledUsers(true)"  :disabled="selected.length==0" size="small"><i class="el-icon-check iconss" ></i>激活</el-button>
                        </li>
                    </ul>
                    <!-- 用户列表-->
                    <el-col :span="24" style="height:20px;"></el-col>
                    <el-table :data="users"
                              stripe
                              v-loading="loading"
                              element-loading-text="拼命加载中..."
                              style="width: 100%;margin-top:20px;"
                              height="443"
                              @sort-change="tableSortChange"
                              @selection-change="tableSelectionChange" >
                        <el-table-column type="selection"
                                         width="60">
                        </el-table-column>
                        <el-table-column sortable="custom"
                                         prop="username"
                                         label="用户名"
                                        >
                        </el-table-column>
                        <el-table-column prop="permission"
                                         label="权限"
                                         >
                                      <template slot-scope="scope">     
                                         <div>
                                            <span v-if="scope.row.permission==3">管理员</span>
                                            <span v-if="scope.row.permission==2">操作员</span>
                                            <span v-if="scope.row.permission==1">浏览员</span>
                                         </div>
                                      </template>
                        </el-table-column>
                        <el-table-column prop="name"
                                         label="姓名"
                                         >
                        </el-table-column>
                        <el-table-column prop="phone"
                                         label="手机">
                        </el-table-column>
                        <el-table-column prop="email"
                                         label="邮箱">
                        </el-table-column>

                         <el-table-column prop="create_time" sortable="custom"  label="注册日期" >
                             <template slot-scope="scope">
                                <div>{{ scope.row.create_time | moment("YYYY年MM月DD日 HH:MM:SS")}}</div>
                             </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="250">
                              <template slot-scope="scope">
                                <span>
                                    <el-button type="danger" size="small" @click="removeUser(scope.row)" :disabled="banSelect(scope.row)">删除</el-button>
                                    <el-button type="primary" size="small" @click="setCurrent(scope.row)">编辑</el-button>
                                </span>
                              </template>
                        </el-table-column>
                    </el-table>
                    <div style=" width:100%; ovflow:hidden; height:40px;"></div>
                    <!--分页begin-->
                    <el-pagination class="tc mg"
                                   :current-page="filter.page"
                                   :page-sizes="[10, 20, 50]"
                                   :page-size="filter.per_page"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="total_rows"
                                   @size-change="pageSizeChange"
                                   @current-change="pageCurrentChange">
                    </el-pagination>
                    <!--分页end-->
                </div>

这是一个简单的用户管理表格 具体其他可见增删改查博客
如下图中 当前用户为柳1202 ,那么当选中当前用户记录时,就对这两个删除按钮进行禁用状态

那就是分为两个进行实现
1.当前自己记录的禁用

<el-button type="danger" size="small" @click="removeUser(scope.row)" :disabled="banSelect(scope.row)">删除</el-button>

banSelect(user){
    var username = $.cookie("usernameCookie");
    if(username == user.username){
        return true
    }else{
        return false
    }
},

2.选中多个但包括自己记录的禁用

<el-button type="danger" icon="delete" :disabled="banSelects()" @click="removeUsers()" size="small">删除</el-button>


banSelects(){
    var username = $.cookie("usernameCookie");
    if(this.selected.length == 0){
        return true;
    }else{
        for(var i = 0;i<this.selected.length;i++){
            if(this.selected[i].username === username){
                return true;
            }
        }
    }
},