vue递归树结构，实现树结构搜索

最新推荐文章于 2024-09-15 18:09:03 发布

原创最新推荐文章于 2024-09-15 18:09:03 发布

· 2k 阅读

3 ·

版权

文章标签：

#vue.js

本文详细介绍了Vue.js中组件的使用方法，包括自定义组件、属性传递、状态管理及事件处理。通过实例展示了如何实现输入框限制长度、列表数据渲染，并深入探讨了组件间的数据通信与状态更新机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div>
      <Input :maxlength="5" v-model="searchValue" size="large"/>
      <listdata :list="list3" :depth="0"></listdata>

    </div>
  </div>
</template>

<script>
  import listdata from './list'
  import {
    Input
  } from 'view-design'

  export default {
    name: "detailes",
    components: {
      listdata,Input
    },
    data() {
      return {
        searchValue: '',
        list3: [],
        list2: [],
        list1: [{
          title: "根级菜单",
          children: [{
            title: "1级菜单",
            children: [
              {
                title: "1级菜单-1",
              },
              {
                title: "1级菜单-2",
              }
            ]
          },
            {
              title: "3级菜单2级菜单",
              children: [
                {
                  title: "2级菜单-1",
                },
                {
                  title: "2级菜单-2",
                }]
            },
            {
              title: "3级菜单",
              children: [
                {
                  title: "3级菜单-1",
                },
                {
                  title: "3级菜单-2",
                }]
            }
          ]
        }]
      }
    },
    watch: {

      searchValue() {
        this.debouncedGetTableByName()
      }
    },
    mounted() {
      // console.log(this.findJieDian(this.list1, data => data.title === '3级菜单-1'))

      this.debouncedGetTableByName = this.$Lodash.debounce(this.search, 500, false)
      this.diguiList(this.list2,this.list1)
       this.diGuihalfSelect(this.list2)
      this.list3=JSON.parse(JSON.stringify(this.list2))
      this.productFilter(this.list3, '')
    },
    methods: {
      findJieDian(list, fun, path = []) {
        for (let node of list) {
          path.push(node.title)
          if (fun(node)) {
            return path
          }
          if (node.children) {
            let fatherArray = this.findJieDian(node.children, fun, path)
            if (fatherArray.length > 0) {
              return fatherArray
            }
          }
          path.pop()
        }
        return []
      },
      //原始数据递归树
      diguiList(list2, list1) {
        list1.forEach((item, index) => {
          list2[index] = Object.assign({}, item, {
            show: true,
            selected: false,
            halfSelected: false,
          })
          if (item.children && item.children.length) {
            this.diguiList(list2[index].children, item.children)
          }
        })
      },
       //半选递归
      diGuihalfSelect(list2){
        list2.forEach(item=>{
          if(item.children && item.children.length){
            this.diGuihalfSelect(item.children)
            item.halfSelected=item.selected?false:(item.children.some((node)=>{return node.selected==true}) || item.children.some((node)=>{return  node.halfSelected==true}))
          }
        })
      },
      //搜索过滤树节点
      search() {
        this.list3=JSON.parse(JSON.stringify(this.list2))
        this.productFilter(this.list3, this.searchValue)

      },
      productFilter(list, name) {
        list.forEach(item=>{
          if (item.children && item.children.length) {
            this.productFilter(item.children, name);
            item.children = item.children.filter(item => {
              /**自己符合条件或者子级符合条件 */
              if (item.title.indexOf(name) != -1 || item.has) {
                return item;
              }
            });
            /**发现子级有满足条件的，给父级添加标识，再次循环时保留父级 has：为标识字段*/
            item.children.length && (item.has = true);
          }
        })
        // const listLength = list.length;
        // for (let index = 0; index < listLength; index++) {
        //   /**父级满足条件，子级全保留 */
        //   // if (list[index].title .indexOf(name)!=-1){
        //   //   continue;
        //   // }
        //   if (list[index].children && list[index].children.length) {
        //     this.productFilter(list[index].children, name);
        //     list[index].children = list[index].children.filter(item => {
        //       if (item.title.indexOf(name) != -1 || item.has) {
        //         return item;
        //       }
        //     })
              //list[index].has = true;
        //   }
        //
        // }
      }
    }
  }
</script>

<style scoped>

</style>