公共部分样式修改及table表头固定

src/app/pages/main/main.component.html

@@ -14,7 +14,7 @@
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="2" name="filter-position">
                         <span>查找定位</span>
                     </label>
-                    <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
+                    <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter)="inputEnter()">
                 </div>
                 <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
                     <!-- <button type="button" class="btn btn-info mr-3">灯光关闭</button>
@@ -145,13 +145,32 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)" [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
-                            <td>{{i+1}}</td> 
+                        <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
+                            [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
+                            <td>{{i+1}}</td>
                             <td></td>
                             <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
                         </tr>
                     </tbody>
                 </table>
+
+                <!-- <nz-table #nzTable nzBordered [nzData]="render_data" [nzFrontPagination]="false" [nzScroll]="{ y: '700px' }">
+                    <thead>
+                        <tr>
+                            <th nzWidth="50px">序号</th>
+                            <th nzWidth="80px">重要提示</th>
+                            <th nzWidth="80px" *ngFor="let airline_col of col_lists">{{airline_col.COL_CN}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let airline_row of nzTable.data;let i = index" (click)="selectRow(airline_row)"
+                            [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
+                            <td>{{i+1}}</td>
+                            <td></td>
+                            <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                        </tr>
+                    </tbody>
+                </nz-table> -->
             </div>
         </div>
     </div>

src/app/pages/main/main.component.scss

@@ -1,6 +1,7 @@
 .main-page {
     width: 100%;
-    height: calc(100% - 66px);
+    height: 100%;
+    overflow-y: scroll;
     padding: 15px 10px;
     background-color: #fff;
     .page-content {
@@ -31,7 +32,8 @@
                 // border: 1px solid #ccc;
                 width: 100%;
                 height: 700px;
-                overflow: scroll;
+                overflow: auto;
+                box-shadow: 0 0 1px .5px #ddd;
                 table{
                     width: max-content;
                     tr{
@@ -40,6 +42,9 @@
                             background: rgb(181, 215, 255);
                         }
                     }
+                    th{
+                        background-color: #ddd;
+                    }
                     th,td{
                         // border: none;
                         text-align: center;

src/app/pages/main/main.component.ts

@@ -103,7 +103,6 @@ export class MainComponent implements OnInit {
     }
 
     ngOnInit() {
-        // console.log($)
         this.changeDetectorRef.detach();
         /* 获取显示列 */
         this.httpCilent.get('/assets/mock-data/airline-col_code.json').subscribe(
@@ -195,6 +194,16 @@ export class MainComponent implements OnInit {
                 this.doSequence(this.combined_data);
             }
         )
+
+        /**
+         * 固定表头
+         */
+        var tableCont = document.querySelector('#table-container')
+        function scrollHandle (){
+          var scrollTop = this.scrollTop;
+          this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
+        }
+        tableCont.addEventListener('scroll',scrollHandle)
     }
 
 
@@ -439,7 +448,7 @@ export class MainComponent implements OnInit {
 
         let tr = $(".selected");
         let objTr = tr[0];
-        $("#table-container").animate({ scrollTop: objTr.offsetTop }, "slow");
+        $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
     }
 
     /**

src/app/pages/main/main.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgZorroAntdModule } from 'ng-zorro-antd'
+
 import { PipesModule } from '../../pipes/pipes.module';
 import { MainComponent } from './main.component';
 import { MainRoutingModule } from './main-routing.module'
@@ -10,6 +12,7 @@ import { MainRoutingModule } from './main-routing.module'
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
+        NgZorroAntdModule,
         PipesModule,
         MainRoutingModule
     ],