zoukankan      html  css  js  c++  java
  • js 模糊搜索树形结构数据

    <template>
      <div class="content">
        <search @getValue="getValue" />
      </div>
    </template>
    <script>
    export default {
      name: "selectTree",
      data() {
        return {
          treeListTmp: [],
          treeList: [
            {
              name: "飞机1",
              hasChild: true,
              id: 1,
              children: [
                {
                  name: "数据1-1",
                  hasChild: true,
                  id: 2,
                  children: [
                    {
                      name: "数据1-1-1",
                      hasChild: false,
                      id: 3,
                    },
                  ],
                },
                {
                  name: "火箭1-2",
                  hasChild: false,
                  id: 4,
                },
              ],
            },
            {
              name: "数据2",
              hasChild: true,
              id: 5,
              children: [
                {
                  name: "轮船2-1",
                  hasChild: true,
                  id: 6,
                  children: [
                    {
                      name: "数据2-1-1",
                      hasChild: false,
                      id: 7,
                    },
                  ],
                },
                {
                  name: "数据2-2",
                  hasChild: false,
                  id: 8,
                },
              ],
            },
          ],
        };
      },
      created() {},
      methods: {
        getValue(msg) {
          this.treeList = [];
          let treeListTmp = JSON.parse(JSON.stringify(this.treeListTmp));
          let tmp = msg
            ? this.rebuildData(msg, treeListTmp)
            : JSON.parse(JSON.stringify(treeListTmp));
          this.treeList.push(...tmp);
        },
        rebuildData(value, arr) {
          if (!arr) {
            return [];
          }
          let newarr = [];
          if (Object.prototype.toString.call(arr) === "[object Array]") {
            arr.forEach((element) => {
              if (element.name.indexOf(value) > -1) {
                const ab = this.rebuildData(value, element.children);
                const obj = {
                  ...element,
                  children: ab,
                };
                newarr.push(obj);
              } else {
                if (element.children && element.children.length > 0) {
                  const ab = this.rebuildData(value, element.children);
                  const obj = {
                    ...element,
                    children: ab,
                  };
                  if (ab && ab.length > 0) {
                    newarr.push(obj);
                  }
                }
              }
            });
          }
          return newarr;
        },
      },
    };
    </script>

    参考地址:https://blog.csdn.net/web_yueqiang/article/details/89483971

  • 相关阅读:
    LwIP源代码文件目录解析
    规划2014!
    test
    111
    df
    第一次北京之行
    Android02--debug.keystore的注册信息
    Android01--开发环境搭建
    dfd
    1007
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/14813534.html
Copyright © 2011-2022 走看看