1. 程式人生 > 實用技巧 >根據搜尋值返回新的樹(Vue版)

根據搜尋值返回新的樹(Vue版)


幫同事解決的需求,根據搜尋值返回有搜尋值的樹結構

searchTreeData (originTreeData, searchValue) {
      if (!searchValue) {
        this.$set(this, 'dataDepartSet', originTreeData);
        return;
      }
      const treeData = JSON.parse(JSON.stringify(originTreeData));
      const searhTree = Array.from({ length: treeData.length });
      function changeTreeBySearch (data, key) {
        data.forEach((e, index) => {
          const treeIndex = key ? `${key}-${index}` : String(index);
          if (~e.title.indexOf(searchValue)) {
            const indexs = treeIndex.split('-');
            let count = 0;
            changeSearchTree(searhTree, treeData);
            function changeSearchTree (item, originItem) {
              const searchIndex = indexs[count];
              if (!item[searchIndex]) {
                item[searchIndex] = {
                  title: originItem[searchIndex].title,
                  expand: true
                };
                if (originItem[searchIndex].children) {
                  item[searchIndex].children = Array.from({ length: originItem[searchIndex].children.length });
                }
              }
              ++count;
              if (item[searchIndex].children && item[searchIndex].children.length) {
                changeSearchTree(item[searchIndex].children, originItem[searchIndex].children);
              }
            }
          }
          e.children && changeTreeBySearch(e.children, treeIndex);
        });
      }
      changeTreeBySearch(treeData);
      function dfsClearUndefined (data, key) {
        for (let i = data.length - 1; i >= 0; --i) {
          if (!data[i]) {
            data.splice(i, 1);
          } else {
            data[i].children && dfsClearUndefined(data[i].children);
          }
        }
      }
      dfsClearUndefined(searhTree);
      this.$set(this, 'dataDepartSet', JSON.parse(JSON.stringify(searhTree)));
    }