angular6中使用树形插件

谁借莪１个温暖的怀抱￠ 2022-01-06 12:27 352阅读 0赞

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

1、在app.model.ts文件中引入ng-zorro框架插件，代码如下

import { NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';

2、在需要使用树形插件的组件中进行引入树形插件：

import { NzFormatEmitEvent,NzTreeNode,NzTreeComponent,NzTreeNodeOptions} from 'ng-zorro-antd';

3、html代码如下：

其中参数可以去[官网地址][Link 1]查看，根据所获取的节点进行节点树的选择，代码如下：

可以再权限选择的上方添加两个按钮，全选和全否，控制树形图的节点配置，代码如下：

// 全选
      checkAll(){
        var Node =[];
        Node = this.nzTreeComponent.getTreeNodes();
        var Nodelength = Node.length;
        for(var i=0;i<Nodelength;i++){
          Node[i].isChecked = true;
          var NodeChildlength = Node[i].children.length;
          for(var j=0;j<NodeChildlength;j++){
            Node[i].children[j].isChecked = true;
          }
        }
      }
      // 全否
      checkNull(){
        var Node =[];
        Node = this.nzTreeComponent.getTreeNodes();
        var Nodelength = Node.length;
        for(var i=0;i<Nodelength;i++){
          Node[i].isChecked = false;
          var NodeChildlength = Node[i].children.length;
          for(var j=0;j<NodeChildlength;j++){
            Node[i].children[j].isChecked = false;
          }
        }
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: /images/20211227/31a0d0bd4952455ebfbf738ee8413498.png
[Link 1]: https://ng.ant.design/components/tree/zh