图上的效果使用了Ng-zorro的nz-tree-select组件
<nz-tree-select style="width: 100%" [nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch
nzPlaceHolder="请选择上级分类" formControlName="JYZCFL_SJFLID">
</nz-tree-select>
TS代码
// 获取树形分类
async sjfl() {
try {
const res = await this.http.get('ZCFL/GetTreeList').toPromise();
this.nodes = this.TreeSelect(res.data);
} catch (error) { }
}
// 树结构选择框数组整理
TreeSelect(data) {
if (data) {
return data.map(d => ({
...d,
title: d.JYZCFL_ZCFLMC,
children: d.children.length ? this.TreeSelect(d.children) : [],
isLeaf: d.children.length ? false : true
}))
} else {
return [];
}
}