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-width: 1366px) {
.right_table {
// width: 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)
}
angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件的更多相关文章
- angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.searchFiles = { n ...
- swiper在vue项目中的循环轮播bug以及点击事件
一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...
- Winform中使用代码编写Button按钮的点击事件
场景 一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行 点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...
- 设置队列中文件上的“X”号的点击事件+uploadLimit动态加1
目的:1.设置文件队列中“x”号的点击事件 2.每次删除服务器文件后,把uploadLimit + 1: 'onUploadSuccess': function (file, data, respon ...
- Android中父View和子view的点击事件的执行过程
Android中的事件类型分为按键事件和屏幕触摸事件,Touch事件是屏幕触摸事件的基础事件,有必要对它进行深入的了解. 一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN- ...
- ListView中的item的按照和item点击事件并存
整个xml文件的根元素如LinearLayout中添加属性android:descendantFocusability="blocksDescendants"
- Android项目实战(十六):QQ空间实现(一)—— 展示说说中的评论内容并有相应点击事件
大家都玩QQ空间客户端,对于每一个说说,我们都可以评论,那么,对于某一条评论: 白雪公主 回复 小矮人 : 你们好啊~ 我们来分析一下: .QQ空间允许我们 点击 回复人和被回复人的名字就可以进入对于 ...
- ListView中加入Button后,Button的点击事件和ListView的点击事件冲突
1.在ItemView配置的xml文件里的根节点加入属性android:descendantFocusability="blocksDescendants" 2.在要加入事件的控件 ...
- EasyUI 中easyui-textbox和easyui-searchbox文本框的点击事件。
html: <input id="txtsearch" class="easyui-textbox" data-options="buttonT ...
- ListView中响应item的点击事件并且刷新界面
---恢复内容开始--- 最近在在实现listview功能中遇到了这个问题: 点击事件写在了adapter的item中,不知道如何在listview的点击事件中更新数据的显示: 总结:1.要使用not ...
随机推荐
- python深拷贝、浅拷贝
.copy() 浅拷贝 如上图 定义列表A指向一个元素,列表A里面嵌套两层列表分布指向两个元素,定义列表B,列表B=A,列表C浅拷贝列表A 从图上可以看出,列表A和列表B指向的是同一个列表元素,而 ...
- AIR32F103(五) FreeRTOSv202112核心库的集成和示例代码
目录 AIR32F103(一) 合宙AIR32F103CBT6开发板上手报告 AIR32F103(二) Linux环境和LibOpenCM3项目模板 AIR32F103(三) Linux环境基于标准外 ...
- 【翻译】Spring Security抛弃了WebSecurityConfigurerAdapter
原文链接:Spring Security without the WebSecurityConfigurerAdapter 作者:ELEFTHERIA STEIN-KOUSATHANA 发表日期:20 ...
- IIS 配置集中式证书模块实现网站自动绑定证书文件
在 Windows 环境下如果采用 IIS 作为 网站服务器时,常规的网站绑定 HTTPS 需要一个一个站点手动选择对应的证书绑定,而且证书过期之后更换证书时也是需要一个个重新绑定操作,无法便捷的做到 ...
- Go语言核心36讲23
我在上两篇文章中,详细地讲述了Go语言中的错误处理,并从两个视角为你总结了错误类型.错误值的处理技巧和设计方式. 在本篇,我要给你展示Go语言的另外一种错误处理方式.不过,严格来说,它处理的不是错误, ...
- 3.8:使用R语言实现Apriori算法示例
〇.目标 1.使用R语言实现Apriori算法完成关联规则挖掘:2.利用超市购物篮Groceries数据进行关联规则分析. 一.利用arules包加载Groceries数据集 二.探索和准备数据 三. ...
- mac连接mysql出现Access denied for user ‘root‘@‘localhost‘
处理方法:1.关闭mysql的服务,点击最左上的苹果图标在系统偏好设置中,找到mysql,点击,stop 确认关闭后进入终端 输入(cd /usr/local/mysql/bin/)回车 输入(sud ...
- Nginx rewrite 详解
Nginx rewrite 详解 本篇主要介绍 nginx 的 rewrite 重定向这个功能进行 详解介绍, 以及介绍它的使用场景 1. rewrite 基本介绍 rewrite是实现URL重写的关 ...
- 痞子衡嵌入式:存储器大厂Micron的NOR Flash芯片特殊丝印设计(FBGA代码)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是存储器大厂Micron的NOR Flash芯片特殊丝印设计(FBGA代码). 痞子衡之前写过一篇文章 <J-Flash在Micron ...
- 对于async和await的使用方式、作用效果不怎么理解 ?没关系,初步看这篇就够了
结论 同步还是异步,区别如下: 同步:你使用 await 修饰符去调用一个异步(async)方法(是异步方法,不过是阻塞式的,可简单理解为同步): 异步:你获取异步方法返回的 Task,就是异步(后文 ...