通过iview组件库渲染树形结构tree

在很多后台管理项目中，我们都会遇到要开发与组织结构相关的需求，此时我们基本都要用到树形结构来完成，但是需求有可能要实现的功能不一样，我本次开发的需求不仅是渲染出树形的组织结构，还要有相应的添加部门，添加子部门，添加大区，编辑和删除的功能，我实现的是下拉菜单，整个树形结构包括三个层级，具体效果如下：

 

 

实现需求的主要因素主要有两部分，第一个是接口获取数据，再遍历数据，在一级数据中添加render函数（如果有要求在一级结构上有相关功能操作的话），第二是给Tree的props：render绑定下级结构的处理方法（主要是给二三级或者更多层级的结构添加不同的图标，或者功能操作，一般可根据返回的数据中的某个标识来判断是哪个层级，如果没有标识的话不好判断，最好让后端添加某个标识可用来判断层级），具体代码如下，可以根据具体需求做改动：

第一步：

<Tree class="organizationTree" :data="organizationData" :render="renderContent" ></Tree>

第二步：

// 获取部门tree结构
    findCauseCodeTreeList() {
      findCauseCodeTreeList().then(res => {
        if(res.success){
                this.organizationData = res.result;
                this.organizationData.forEach(el => {
                  el.render = (h, { root,node,data}) => {
                    return h('span', {
                      style: {
                          display: 'inline-block',
                          // display: 'flex',
                          // justifyContent: 'space-between',
                          width: '100%'
                      }
                  }, [
                      h('span', [
                          h('Icon', {
                              props: {
                                  type: 'ios-folder-outline'
                              },
                              style: {
                                width:'20px',
                                  marginRight: '8px'
                              }
                          }),
                          h('span', data.title)
                      ]),
                      h('span', {
                          style: {
                              display: 'inline-block',
                              float: 'right',
                          }
                      }, [
                        h("Dropdown", {
                          style: {
                            marginLeft: "4px"
                          },
                        }, [
                          h("a", {}, [
                            // h("span", "下拉菜单"),
                            h("Icon", {
                              props: {
                                type: "ios-more"
                              },
                            })
                          ]),
                          h("DropdownMenu", {
                            slot: "list",
                          }, [
                            h("DropdownItem", {
                              props: {
                                name: 'add'
                              },
                              nativeOn: {
                                click: (e,name) => {
                                  console.log(data,'data');
                                  this.findSeriesList(data.causeCode)
                                  this.addSubdivisionForm.parentId = data.id
                                  this.addSubdivisionModal = true
                                }
                              }
                            }, "添加子部门"),
                            h("DropdownItem", {
                              props: {
                                name: 'rename'
                              },
                              nativeOn: {
                                click: (e,name) => {
                                  this.renameClick()
                                }
                              }
                            }, "重命名"),
                            h("DropdownItem", {
                              props: {
                                name: 'delete'
                              },
                              nativeOn: {
                                click: (e,name) => {
                                  this.deleteCurrent()
                                }
                              }
                            }, "删除"),
                          ])
                        ])
                      ])
                  ]);
                  }
                })
            } else {
                this.$Message.error(res.message);
            }  
      })
    },

第三步：

renderContent (h, { root, node, data }) {
      if (data.type == '2') {
          return h('span', {
              style: {
                  display: 'inline-block',
                  // display: 'flex',
                  // justifyContent: 'space-between',
                  width: '100%'
              }
          }, [
              h('span', [
                  h('Icon', {
                      props: {
                          type: 'ios-paper-outline'
                      },
                      style: {
                        width:'20px',
                          marginRight: '8px'
                      }
                  }),
                  h('span', data.title)
              ]),
              h('span', {
                  style: {
                      display: 'inline-block',
                      float: 'right',
                  }
              }, [
                h("Dropdown", {
                  style: {
                    marginLeft: "4px"
                  },
                }, [
                  h("a", {}, [
                    // h("span", "下拉菜单"),
                    h("Icon", {
                      props: {
                        type: "ios-more"
                      },
                    })
                  ]),
                  h("DropdownMenu", {
                    slot: "list",
                  }, [
                    h("DropdownItem", {
                      props: {
                        name: 'add'
                      },
                      nativeOn: {
                        click: (e,name) => {
                          this.addRegionalForm.parentId = data.id
                          this.addRegionalModal = true
                        }
                      }
                    }, "添加大区"),
                    h("DropdownItem", {
                      props: {
                        name: 'rename'
                      },
                      nativeOn: {
                        click: (e,name) => {
                          this.renameClick()
                        }
                      }
                    }, "重命名"),
                    h("DropdownItem", {
                      props: {
                        name: 'delete'
                      },
                      nativeOn: {
                        click: (e,name) => {
                          this.deleteCurrent()
                        }
                      }
                    }, "删除"),
                  ])
                ])
              ])
          ]);
          } else {
            return h('span', {
              style: {
                  display: 'inline-block',
                  // display: 'flex',
                  // justifyContent: 'space-between',
                  width: '100%'
              }
          }, [
              h('span', [
                  h('Icon', {
                      props: {
                          type: 'ios-list-box-outline'
                      },
                      style: {
                        width:'20px',
                          marginRight: '8px'
                      }
                  }),
                  h('span', data.title)
              ]),
              h('span', {
                  style: {
                      display: 'inline-block',
                      float: 'right',
                  }
              },)
          ]);
          }
      },

引用这三步之后，只需要把里面的功能做出改动以及下拉菜单的点击事件做出改动即可。