angular中利用css原生dom完成一个头部固定的表格

先看图片吧

GIF压缩的很厉害，原图是这样的

可以看到头部是固定的，并且各项不论是浏览器放大缩小，各项都是固定的。

先来说说思路吧

首先这不是一个表格，这是两个表格，也就是其实头部和本体是各一个table

<table class="tableHead">
 <tr *ngFor"let item of headData">
  <td>{{item.title}}</td>
 </tr>
</table>

<table class="tableBody">
 <tr *ngFor="let data of bodyData;let i = index" #element>
  <ng-container *ngFor="let item of headData">
   <span[innerHTML]="data[item.property]?data[item.property]:'--'"></span>
  </ng-container>
 </tr>

</table>

以下是简略的列表页数据

 headData:Array<any>=[
    {title:'操作',property:'checkbox',type:'checkbox',width:''},
    {title:'序号',property:'serial',type:'serial',width:''},
    {title:'信息类型',property:'infoType',type:'special',width:''},
    {title:'服务名称',property:'serviceName',type:'special',width:''},
    {title:"数据来源",property:'sourceName',type:'special',width:''},
    {title:"服务版本",property:'serviceVersion',width:''},
    {title:"服务描述",property:'description',width:''},
    {title:"注册单位",property:'register',width:''},
    {title:"注册时间",property:'registerDate',width:''},
    {title:"服务状态",property:'status',type:'state',width:''},
  ]
  
  bodyData:Array<any>=[
    {
       infoType:'航行安全信息服务',serviceName:'航行通告',sourceName:'海上安全信息发布系统',
       serviceVersion:'v1.0',description:'测试描述',register:'航测科技中心',registerDate:'20201-5-8 9:51',
       status:"0" ,infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'
    },
    {
       infoType:'航行安全信息服务',serviceName:'航行通告',sourceName:'海上安全信息发布系统',
       serviceVersion:'v1.0',description:'测试描述',register:'航测科技中心',registerDate:'20201-5-8 9:51',
       status:"0" ,infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'
    },
  ]

页面上就是根据数据然后循环出来的列表，样式和具体的判断不表，此次仅仅只是说明如何控制头部和本体的两个表格的宽度一致

思路就是在浏览器的大小改变的时候，获得本体表格也就是tableBody的一行tr中的每一个td宽度，然后赋值给headData中的width属性，这样表格的宽度就会自动变化了

//将html文件中的#element对象绑定，获取到其dom
@ViewChild('element') navListElement: ElementRef;

ngAfterViewInit(){//在初始化了组件的视图后执行
    this.setWidth()
    window.onresize=($event)=>{//监听浏览器的窗口大小改变事件
      this.setWidth()
    }
  }
  
 setWidth(){
    setTimeout(() => {//利用定时器把以下操作往后推一个生命周期，不然有可能拿不到对象
      if(this.navListElement){
        let children = this.navListElement.nativeElement.children//这一步拿到的是循环出来的第一个tr对象本身的所有后代 也就是tr里面的td
        for(let i = 0;i<children.length-1;i++){
          let item = children[i]
          // console.log('item.offsetWidth',item.offsetWidth);

          this.headData[i].width=item.offsetWidth//将宽度赋值到headData的width中
        }
      }
    });
  }

这样就可以完成两个表格的宽度同步了，其他的问题比如解决滚动条的占位问题就暂且不表了，下次有机会再讲吧。