vue原生渲染树形节点数据

最新推荐文章于 2024-04-29 10:42:46 发布

信588

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量715

点赞数 1

分类专栏：笔记 Vue快速入门文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56023114/article/details/126584658

版权

笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Vue快速入门

6 篇文章 0 订阅

订阅专栏

创建容器

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

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


 jiegou(arr) {
      let html = ""; //每次都创建一个空值
      arr.forEach((item, index) => {
        if (item.children) {
          //有下级   需要调本函数再次处理 直到没有下级
          html += `<div  data-desc=${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}
         <div style=" ${
           index == this.treeIndex
             ? " transform:rotate(90deg);margin-right:0.2rem"
             : ""
         }">
         <img 
          style="width: 0.16rem;margin-right: 0.32rem; "
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAnCAYAAAALkrgzAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAEwSURBVEhLzde9jcJAEIZhHzRAC9cJDViig4PELofYkaECEudHCUcHXOT0OvDNt3+wwj87OxPwSqtlCB4tBiG7GIYhrKqqts+zZK0KV13XJ9q+ad/bd2QZ2KFfeE21Gvi67/st7Uc7hnZd1/2WZfnjZnarpmmutB/sGCU6ubkUhONSqOLhy9PGA4w08QhGWvgLjDTwURhJ8UkYSfBZGOXiizDKwZNgxMWTYcTBWTBKxdkwSsE/8G+fm0NaO0V9Zp3Y505+tlPU/v1OPIMe6JPcs+AFFJeH/6tIQRELTkVRMsxBURLMRdEinIOiWTgXRZOwBEWjsBRFL7AGiiJYC0UB1kSRgbVR5O+PL3aMykYRToyb65uZHolQhBvvP9pxao+LUZN/yqEnpg2tnZ9layj+AW79PBNSxACgAAAAAElFTkSuQmCC"
          alt=""
        />
         </div>
         </div>
                   <div  data-desc=${item.id} data-index=${index} data-title=${
            item.title
          } style="${
            index == this.treeIndex ? "" : "display:none;"
          }"> ${this.jiegou(item.children)}</div>
                            `;
        } else {
          //没有下级 直接渲染结构
          html += ` <div  data-chtitle=${item.title}    style="padding:0.2rem; padding-left:0.64rem;border-bottom: 1px solid #f3f3f3;" >${item.title}  
        </div>`;
        }
      });
      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);
    },