<tbody>
<ng-container *ngFor="let data of expandTable.data">
<ng-container *ngFor="let item of mapOfExpandedData[data.key]">
<tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
<td class="fristTD">
<a (click)="edit(item.key)">编辑</a>
<span style="color: #ccc;">|</span>
<a nz-popconfirm nzPopconfirmTitle="确定将选择数据删除?" nzPopconfirmPlacement="bottom"
(nzOnConfirm)="deleteRow(item.key)" (nzOnCancel)="cancel()"
style="color: red;">删除</a>
<td [nzIndentSize]="item.level * 20" [nzShowExpand]="!!item.children.length"
[(nzExpand)]="item.expand"
(nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)">
{{ item.JYZCFL_ZCFLMC }}
<td nzAlign="center" style="padding-top: 0; padding-bottom: 0;">
<img [src]="item.IMG" *ngIf="item.IMG" style="width: 30px;height: 30px;"
(click)="showImg(item)" />
<td>{{ item.JYZCFL_KCYJSL }}</td>
<td>{{ item.JYZCFL_YXTS }}</td>
<td>{{ item.JYZCFL_BZ }}</td>
<td>{{ item.JYZCFL_WHR }}</td>
<td>{{ item.JYZCFL_WHSJ|date:'yyyy-MM-dd HH:mm:ss' }}</td>
</ng-container>
</ng-container>
</tbody>
// 获取首页树状图
async getMultiple() {
try {
this.loading = true;
const res = await this.http.get('ZCFL/GetTreeList').toPromise()
this.listOfMapData = res.data;
this.listOfMapData.forEach(item => {
this.mapOfExpandedData[item.key] = this.convertTreeToList(item);
this.loading = false;
} catch (error) { }
collapse(array: any[], data: any, $event: boolean): void {
if ($event === false) {
if (data.children) {
data.children.forEach(d => {
const target = array.find(a => a.key === d.key)!;
target.expand = false;
this.collapse(array, target, false);
} else {
return;
convertTreeToList(root: any) {
const stack: any[] = [];
const array: any[] = [];
const hashMap = {};
stack.push({ ...root, level: 0, expand: false });
while (stack.length !== 0) {
const node = stack.pop()!;
this.visitNode(node, hashMap, array);
if (node.children) {
for (let i = node.children.length - 1; i >= 0; i--) {
stack.push({ ...node.children[i], level: node.level! + 1, expand: false, parent: node });
return array;
visitNode(node: any, hashMap: { [key: string]: boolean }, array): void {
if (!hashMap[node.key]) {
hashMap[node.key] = true;
if (node.WJID) {
this.getImgViewSingle(node.WJID).then(img => {
node.IMG = img;
array.push(node);
欢迎大家交流分享经验
// An highlighted block
var foo = 'bar';
.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
background-color: rgba(24, 144, 255, 1) !imp...
日常开发中表单使用很常见，正巧刚使用完，此次对nz-table的表单页脚显示总数据条数和当前页进行配置小结；
具体基础用法可以参考官方文档 nz-table集成，如下是对页脚总页数和条数配置的拓展：
注：需要预先声明好当前页码和数据总条数的字段并从接口数据中赋值
首先，在获取到页码和数据总条数的基础上配置页脚模板
当前页码可以通过组件中的 [nzPageIndex]="pageIndex" 获取；
数据总条数可以通过数据源数组的 length 获取；
<ng-template #...
groupFakeData[0].data的长度，结合table的相关知识，我们得出结论：由于table会根据第一行的th元素生成对应数量的col，也就是说第一行的「表头分组」操作只生成了8个col，并不是生成32个col然后以4个为一组合并，并且每个col的宽度是tableWidth的宽度。上面我们提到，每个col的宽度会根据第一行th的宽度来生成，那么我们可以简化一下，只在第一行th写宽度就可以了。可以看到，跟我们理想的样子大相径庭，为什么会出现这样的效果？
做了一个业务线上的客户定制化报表需求，因为报表存在各种合并行，合并列，静态动态按需拼接数据等一系列操作，日常使用的 帆软报表平台，公司新推的 自定义报表平台在实现方面可能存在问题，由于年底事情多，人手也不够，各种任务时间排期还特别紧，经组内前端讨论，我们决定用比较稳妥靠谱的方式，手搓了几个定制化报表，由于之前没有做过这么多的自定义合并行列的表格，这次开发实现过程也是一个探索的过程。
前端项目中，我们经常会使用阿里开源的组件库：ant-design，其提供的组件已经足以满足多数的需求，拿来就能直接用，十分方便，当然了，有些公司会对组件库进行二次封装，改造成极具自家风格的产品。
在本系列的文章中，不谈高大上的东西，不深究底层源码，只分享一些项目中遇到的小问题。
表格（table）
——师傅以为是组件库的bug，没想到……
不知道正在阅读本文的读者有没有经历过：
在使用 ...
上一此在介绍如何获取cookie时候已经说过，在网页开发者功能里面可以对网页进行抓包分析，详见：
Python 微博爬取实战（一）爬虫参数：如何获得cookie，实现爬虫登陆爬取
1.那么问题来了，什么是json数据呢？
先介绍一下历史：
过去传统网站开发，网站就像电脑里面的文件目录，用户通过浏览器直接访问服务器内文件。
就像我们电脑的某个盘，随着使用时间变久，文件越来越多，会发现文件越来越难以管理。出现文件寻找难度大，文件损坏，污染数据等问题。
所以我们构建数据库作为服务器的数据管理内核.
1）为表格外的 div 容器添加 #tableContainer，用于在 ts 中获取div的长度。
2）nzScroll 配置表格的滚动属性，当 y 的值超过 tableHeight 时，表格内容自动开始滚动显示
<div class="table-container Fill" #tableContainer>
<nz-table
