递归算法将字符串转化为tree结构，实现多级下拉

程序媛_panpan

已于 2022-08-23 14:33:56 修改

阅读量271

点赞数

分类专栏： vue 原生JavaScript 文章标签： javascript 前端开发语言

于 2022-08-23 14:28:59 首次发布

本文链接：https://blog.csdn.net/weixin_46186815/article/details/126484278

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

原生JavaScript

8 篇文章 0 订阅

订阅专栏

需求：将后台返回的如下字符串：
在这里插入图片描述
pc端使用：解析为前端element ui ===》el-cascader可渲染的树级结构：

 // 多级下拉转化
    cascaderZhua(e) {
      if (e) {
        let str = e.replace(/\<p\>/g, '')
        let str2 = str.replace(/\<\/p\>/g, ',')
        let str3 = str2.substring(0, str2.length - 1)
        let str4 = str3.split(',')
        // console.log(str4);

        let dropData = []
        var index = 0
        var hierarchyMap = new Map()
        let dropContent = str4

        dropContent.forEach((item) => {
          let prefixData = item.match(/^[-]+/)

          index += 1
          let dropDataItem = {}
          //序号
          dropDataItem.id = index
          dropDataItem.value = index
          //层级
          let hierarchy = 0

          if (prefixData != null) {
            hierarchy = prefixData[0].length
            dropDataItem.label = item.substring(hierarchy)
          } else {
            dropDataItem.label = item
          }
          hierarchyMap.set(hierarchy, dropDataItem.id)
          if (hierarchy === 0) {
            //顶层
            dropDataItem.parentId = -1
          } else {
            //设置父级id
            let parentId = hierarchyMap.get(hierarchy - 1)
            if (parentId === undefined) {
              dropDataItem.parentId = -1
            } else {
              dropDataItem.parentId = parentId
            }
          }
          dropDataItem.children = []
          dropData.push(dropDataItem)
        })
        let multiDrop = []
        dropData
          .filter((dropDataItem) => dropDataItem.parentId === -1)
          .forEach((item) => {
            multiDrop.push({
              label: item.label,
              value: item.label,
              children: item.children,
            })
            this.addChildren(item, dropData)
          })
        return multiDrop
      }
    },

    // 递归调用
    addChildren(parentItem, dropData) {
      dropData
        .filter((dropDataItem) => dropDataItem.parentId === parentItem.id)
        .forEach((item) => {
          // arentItem.children.push(item)
          parentItem.children.push({
            label: item.label,
            value: item.label,
            children: item.children,
          })
          this.addChildren(item, dropData)
        })
    },

移动端使用：解析为前端vant ui ===》van-cascader可渲染的树级结构：

cascaderZhua(e) {
      if (e) {
        let str = e.replace(/\<p\>/g, '')
        let str2 = str.replace(/\<\/p\>/g, ',')
        let str3 = str2.substring(0, str2.length - 1)
        let str4 = str3.split(',')
        // console.log(str4);

        let dropData = []
        var index = 0
        var hierarchyMap = new Map()
        let dropContent = str4

        dropContent.forEach((item) => {
          let prefixData = item.match(/^[-]+/)

          index += 1
          let dropDataItem = {}
          //序号
          dropDataItem.id = index
          dropDataItem.value = index
          //层级
          let hierarchy = 0

          if (prefixData != null) {
            hierarchy = prefixData[0].length
            dropDataItem.text = item.substring(hierarchy)
          } else {
            dropDataItem.text = item
          }
          hierarchyMap.set(hierarchy, dropDataItem.id)
          if (hierarchy === 0) {
            //顶层
            dropDataItem.parentId = -1
          } else {
            //设置父级id
            let parentId = hierarchyMap.get(hierarchy - 1)
            if (parentId === undefined) {
              dropDataItem.parentId = -1
            } else {
              dropDataItem.parentId = parentId
            }
          }
          // dropDataItem.children = []
          dropData.push(dropDataItem)
        })
        // console.log(dropData);
        let multiDrop = []
        dropData
          .filter((dropDataItem) => dropDataItem.parentId === -1)
          .forEach((item) => {
            // multiDrop.push(item);
            multiDrop.push(item)
            this.addChildren(item, dropData)
          })
        return multiDrop
      }
    },
    // 递归调用
    addChildren(parentItem, dropData) {
      dropData
        .filter((dropDataItem) => dropDataItem.parentId === parentItem.id)
        .forEach((item) => {
          // arentItem.children.push(item)
          if (parentItem.children === undefined) {
            parentItem.children = []
          }
          parentItem.children.push(item)

          this.addChildren(item, dropData)
        })
    },