Jinan_project/src/app/home/system-management/user/user.component.html

<div class="box">
    <div class="header">
        <span>
            用户管理
        </span>
    </div>
    <div class="searchbox">
        <div class="search">
            <input type="text" nz-input placeholder="用户账号" [(ngModel)]="searchForm.id" />
            <input type="text" nz-input placeholder="用户姓名" [(ngModel)]="searchForm.name" />
            <input type="text" nz-input placeholder="所属机构" [(ngModel)]="searchForm.or" />
            <button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
            <button nz-button nzType="default"><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button>
        </div>

        <button nz-button nzType="primary" (click)="addUser()"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>创建用户</button>
    </div>
    <div class="content">
        <div class="tablebox">
            <nz-table nzBordered #basicTable [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false'
                [nzPageSize]='16'>
                <thead>
                    <tr>
                        <th>账号</th>
                        <th>姓名</th>
                        <th [width]="'30%'">角色/预警接收级别</th>
                        <th>所属机构</th>
                        <th>审核状态</th>
                        <th>用户状态</th>
                        <th [width]="'25%'">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of basicTable.data">
                        <td>2</td>
                        <td>3</td>
                        <td nzBreakWord>
                            4
                        </td>
                        <td>item
                            5
                        </td>
                        <td>
                            6
                        </td>
                        <td>
                            8
                        </td>
                        <td class="operation">
                            <a (click)="editUser(item)">编辑</a>
                            <a (click)="resetPassword(item)">重置密码</a>
                            <a class="green" (click)="cancel(item,true)">启用</a>
                            <!-- <a *ngIf="item.isActive" class="redColor" (click)="cancel(item,false)">禁用</a> -->
                            <a class="red" (click)="delete(item)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
        <div class="pagination">
            <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16"
                [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
            </nz-pagination>
            <ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template>
        </div>
    </div>
</div>