vue2-org-tree 树状图插件自定义样式

  项目要展示组织架构图，而且第三级样式可以自定义样式。网上没有找到相关的自定义内容。跟同事讨论 ，尝试出了一种解决方法。

 主要是使用 renderContent(h, data) 方法，其实是可以直接return   <iframe>标签的。这一点在网上确实没查到。

如下所示，其实主要原理就是在返回的数据data格式中增加字段，比如 区分级别的 typeName，设置iframe的 宽高像素，等这些参数，都可以通过后端传过来。

1.前端代码

renderContent(h, data) {
        // return data.label;
        // debugger
        if (data.typeName == "楼栋长"){
          return (
            <iframe
              frameborder="0"
              srcdoc={data.label}
              height={data.height}
              width={data.width}
              scrolling="no"
              seamless
            >
            </iframe>
          )
          /*return (
            <div>
              <div style="font-size:18px;line-height:20px;">
                <i class="el-icon-user-solid"></i>
                <span>{data.label}</span>
                <i class="el-icon-phone"></i>
                <span>{data.phone}</span>
                <span>包靠楼栋:</span>
                <span>{data.buildName}</span>
              </div>
            </div>
          );*/
        }else if (data.typeName == "一级"){
          return (
            <iframe
              frameborder="0"
              srcdoc={data.label}
              height={data.height}
              width="45px"
              scrolling="no"
              seamless
            >
            </iframe>
          )
          /*return (
            <div>
              <div style="font-size:25px;line-height:20px;font-weight:500;color:yellow;writing-mode:tb-rl;">
                <span>{data.label}</span>
              </div>
            </div>
          );*/
        }else if (data.typeName == "服务专员一级"){
          return (
            <div>
              <div style="font-size:25px;line-height:20px;font-weight:500;color:yellow;">
                <span>{data.label}</span>
              </div>
            </div>
          );
        }else if (data.typeName == "二级"){
          // 战时服务队、 平时服务队 二级分组标题
          return (
            <iframe
              frameborder="0"
              srcdoc={data.label}
              height="35px"
              width={data.width}
              scrolling="no"
              seamless
            >
            </iframe>
          )
          /*return (
            <div>
              <div style="font-size:20px;line-height:20px;font-weight:500;color:yellow">
                <span>{data.label}</span>
              </div>
            </div>
          );*/
        }  else if (data.typeName == "党员中心户"){
          return (
            <iframe
              frameborder="0"
              srcdoc={data.label}
              height={data.height}
              width={data.width}
              scrolling="no"
              seamless
            >
            </iframe>
          )
          /*return (
            <div>
              <div style="font-size:18px;line-height:20px;">
                <i class="el-icon-user-solid"></i>
                <span>{data.label}</span>
                <i class="el-icon-phone"></i>
                <span>{data.phone}</span>
                <span>包靠户数:</span>
                <span>{data.huNum}</span>
              </div>
            </div>
          );*/
        }else if (data.typeName == "服务队"){
          //  平时、 战时 服务队
          return (
              <iframe
                frameborder="0"
                srcdoc={data.label}
                height={data.height}
                width="600px"
                scrolling="no"
                seamless
              >
              </iframe>
          )
          // return data.label;
        }else {
          // 服务专员样式
          return (
            <div style="width:250px;">
              <div style="font-size:20px;line-height:20px;">
                <span>{data.label}</span>
              </div>
              <div style="font-size:20px;line-height:20px;">
                <span>{data.phone}</span>
              </div>
            </div>
          );
        }

      },

2.后端代码

 后端干了绝大部分工作，查出数据，拼接好html元素代码，并通过数据的条数计算 iframe的 宽、高等。

private List<PingZhanPeopleDetailVO> makeDangyuanChildren(List<PingZhanPeopleDetailVO> list){
        List<PingZhanPeopleDetailVO> resultList = new ArrayList<>();
        PingZhanPeopleDetailVO peopleDetailVO = new PingZhanPeopleDetailVO();
        StringBuilder label = new StringBuilder("<div style=\"font-size:18px;color:white;display: flex;justify-content: center;\">");
        label.append("<table style=\"border: black 0px  solid;border-spacing: 0px;border-collapse: collapse;\"");
        if (list.size()<30){
            for (PingZhanPeopleDetailVO pingZhanPeopleDetailVO : list) {
                label.append("<tr style=\"border: black 0px  solid;line-height:28px\">");
                label.append("<td style=\"border: black 0px  solid;\">"+pingZhanPeopleDetailVO.getLabel()+"</td>");
                label.append("<td style=\"border: black 0px  solid;\">"+"<i class=\"el-icon-phone\"></i>"+pingZhanPeopleDetailVO.getPhone()+"&nbsp;"+
                    pingZhanPeopleDetailVO.getHuNum()+"户"+"&nbsp;&nbsp;&nbsp;"+"</td>");
                label.append("</tr>");
            }
            peopleDetailVO.setHeight(list.size() * 30 +"px");
            peopleDetailVO.setWidth("300px");
        }else {
            List<List<PingZhanPeopleDetailVO>> newList = split(list, 2);
            for (List<PingZhanPeopleDetailVO> pingZhanPeopleDetailVOS : newList) {
                label.append("<tr style=\"border: black 0px  solid;line-height:28px\">");
                for (PingZhanPeopleDetailVO pingZhanPeopleDetailVO : pingZhanPeopleDetailVOS) {
                    label.append("<td style=\"border: black 0px  solid;\">"+pingZhanPeopleDetailVO.getLabel()+"</td>");
                    label.append("<td style=\"border: black 0px  solid;\">"+"<i class=\"el-icon-phone\"></i>"+pingZhanPeopleDetailVO.getPhone()+"&nbsp;"+
                        pingZhanPeopleDetailVO.getHuNum()+"户"+"&nbsp;&nbsp;&nbsp;"+"</td>");
                }
                label.append("</tr>");
            }
            peopleDetailVO.setHeight(newList.size() * 30 +"px");
            peopleDetailVO.setWidth("550px");
        }
        label.append("</table>");
        label.append("</div>");
        peopleDetailVO.setLabel(String.valueOf(label));
        peopleDetailVO.setTypeName("党员中心户");
        resultList.add(peopleDetailVO);
        return resultList;
    }

3.效果图

可以实现 分级的样式自定义了