PrimeNG 是一个基于 Angular 的 UI 组件库
npm install primeng --save
npm install primeicons --save
app.module.ts
文件中,导入 TreeModule
:import { TreeModule } from 'primeng/tree';
@NgModule({
imports: [
// ... 其他模块
TreeModule
],
// ... 其他配置
})
export class AppModule { }
app.component.ts
中:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data = [
{
label: 'Node 1',
children: [
{ label: 'Node 1.1' },
{ label: 'Node 1.2' }
]
},
{
label: 'Node 2',
children: [
{ label: 'Node 2.1' },
{ label: 'Node 2.2' }
]
}
];
}
<p-tree>
组件并绑定数据。为了显示复选框,请设置 selectionMode
属性为 "checkbox"
:<!-- app.component.html -->
<p-tree [value]="data" selectionMode="checkbox"></p►ree>
现在,你的 PrimeNG 树形控件应该显示带有复选框的节点。用户可以通过点击复选框来选择或取消选择节点。
领取专属 10元无门槛券
手把手带您无忧上云