纯前端 表单树形控件搜索

纯前端 树形控件搜索

data(){
return{
tableTreeDdata :[],表格树数据
searchData :[],搜索数据
}
}
 // 搜索

    async handleSearch() {
      this.searchData = []

      if (this.filters.name && this.filters.name.length > 0) {
        // console.log('list', this.handelSearchData(this.tableTreeDdata));

        await this.handelSearchData(this.tableTreeDdata) // 调用搜索方法

        // console.log(this.searchData);

        this.tableTreeDdata = this.searchData

      } else {
        this.findTreeData() // 搜索框无内容重新获取数据

      }

    },

    handelSearchData(lists) {
      // console.log("this.tableTreeDdata", this.tableTreeDdata);

      // console.log("lists", lists);

      const res = lists.filter(val => {
        let search = val.name.includes(this.filters.name)

        if (val.list && val.list.length > 0) {
          return search || this.handelSearchData(val.list) // 调用搜索方法

        } else {
          // console.log(val, val.name.includes(this.filters.name));

          return search

        }

      })

      if (res.length > 0) {
        this.searchData = [...res]

      }

    },