vue原生渲染树形节点数据

创建容器

      <div id="dom" @click="hmrlcl"></div>

处理函数：直接把树形结构传进来，返回html

 jiegou(arr) {
      let html = ""; //每次都创建一个空值
      arr.forEach((item, index) => {
        if (item.children) {
          //有下级   需要调本函数再次处理 直到没有下级
          html += `
${item.id} data-index=${index} data-title=${
            item.title
          } style="${
            index == this.treeIndex
              ? "border-bottom: 1px solid #f3f3f3;padding:0.2rem;display: flex; align-items: center;justify-content: space-between;font-weight: bold;  "
              : "border-bottom: 1px solid #f3f3f3;padding:0.2rem;display: flex; align-items: center;justify-content: space-between;"
          }" >${item.title}
         
${
           index == this.treeIndex
             ? " transform:rotate(90deg);margin-right:0.2rem"
             : ""
         }">
         
         
         
                   
${item.id} data-index=${index} data-title=${
            item.title
          } style="${
            index == this.treeIndex ? "" : "display:none;"
          }"> ${this.jiegou(item.children)}
                            `;
        } else {
          //没有下级 直接渲染结构
          html += ` 
${item.title}    style="padding:0.2rem; padding-left:0.64rem;border-bottom: 1px solid #f3f3f3;" >${item.title}  
        `;
        }
      });
      return html; //处理完的结果输出
    },

插入html

    // 单位点击事件
    hmrlcl(event) {![在这里插入图片描述](https://img-blog.csdnimg.cn/d0edd210a2914a1c97aa984b918ed357.png#pic_center)

      // this.treeapi("1123598813738675569");
      let dom = document.getElementById("dom");
      dom.innerHTML = this.jiegou(this.data);
    },