zoukankan      html  css  js  c++  java
  • angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件

    首先来说屏幕自适应 HTML

    
    <div class="container right_table">
      <nz-table #basicTable nzBordered [nzData]="datas" [nzScroll]="{ x: datasTh.length*180 + 360+'px', y: '235px' }"
        [nzTotal]="topTable.total" [nzPageSize]="topTable.pageSize" [nzPageIndex]="topTable.pageNo"
        (nzPageIndexChange)="getIndexChange()" [nzPaginationType]="small" class="top_table">
        <thead>
          <tr>
            <th>Station</th>
            <th>POR</th>
            <th *ngFor="let item of datasTh">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td>{{ data.a }}</td>
            <td>{{ data.b }}</td>
            <td *ngFor="let item of datasTh">{{ data.ccc[item] }}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    

    屏幕自适应 LESS

    // 当屏幕最大为1366宽时候
    @media screen and (max- 1366px) {
    
      .right_table {
        //  750px;
        .top_table {
          /deep/.ant-table-body{
            max-height: 170px!important;
          }
        }
      }
      
    }
    
    

    滚动条的代码就很少了,组件这个属性完美解决问题~~~ [nzScroll]

    [nzScroll]="{ x: datasTh.length*180 + 360+'px', y: '235px' }"
    

    然后来说点击事件

    <tr *ngFor="let data of basicTable.data" (click)="getTableData(data)">
                <td>{{ data.station }}</td>
                <td>{{ data.por }}</td>
                <td *ngFor="let item of datasTh">{{ data.floorTossRate[item] }}</td>
    </tr>
    
    
    
    getTableData(data) {
        console.log(data)
    }
    
  • 相关阅读:
    java NIO的基本用法
    BufferedReader源码分析
    FileInputStream读中文乱码问题
    Java使用IO流对同一个文件进行读写操作
    php表格--大数据处理
    tp5--模型关联
    tp5 -- join注意事项
    表单外部提交
    网站防止sql注入
    微信网页授权报code been used, hints: [ req_id: XYv1Ha07042046 ]
  • 原文地址:https://www.cnblogs.com/sugartang/p/14728861.html
Copyright © 2011-2022 走看看