首页 > 建站教程 > JS、jQ、TS >  js vue实现对多级多维数组进行筛选正文

js vue实现对多级多维数组进行筛选

vue中需要对下面的数组通过name字段进行筛选,不涉及接口,纯前端筛选:

data(){
    return {
        // 搜索的关键词
        searchKey: '',
        // 列表,要进行筛选
        list: [
          {
            name: '概况',
          }, {
            name: '考勤管理',
            children: [
              {
                name: '学员出勤',
                children: [
                  {
                    name: '出勤统计',
                    children: []
                  }, {
                    name: '请假申请',
                    children: []
                  }, {
                    name: '考勤设置',
                    children: []
                  }
                ]
              }, {
                name: '教职工考勤',
                children: [
                  {
                    name: '考勤统计',
                    children: []
                  }, {
                    name: '流程审批',
                    children: []
                  }, {
                    name: '考勤设置',
                    children: []
                  }
                ]
              }, {
                name: '硬件管理',
                children: [
                  {
                    name: '考勤卡管理',
                    children: []
                  }, {
                    name: '设备管理',
                    children: []
                  }
                ]
              }
            ]
          }, {
            name: '教务管理',
            children: [
              {
                name: '常规教务',
                children: [
                  {
                    name: '班级',
                    children: []
                  }, {
                    name: '课程',
                    children: []
                  }
                ]
              }, {
                name: '日常园务',
                children: [
                  {
                    name: '图书管理',
                    children: []
                  }, {
                    name: '通知发布',
                    children: []
                  }
                ]
              }
            ]
          }, {
            name: '课程销售',
            children: [
              {
                name: '销售管理',
                children: [
                  {
                    name: '课程销售',
                    children: []
                  }, {
                    name: '订单查询',
                    children: []
                  }
                ]
              }
            ]
          }, {
            name: '学员管理',
            children: [
              {
                name: '学员管理',
                children: [
                  {
                    name: '学员信息',
                    children: []
                  }, {
                    name: '历史变更',
                    children: []
                  }, {
                    name: '历史学员',
                    children: []
                  }
                ]
              }
            ]
          }, {
            name: '更多',
            children: [
              {
                name: '组织管理',
                children: [
                  {
                    name: '校区管理',
                    children: []
                  }, {
                    name: '账号管理',
                    children: []
                  }
                ]
              }, {
                name: '财务管理',
                children: [
                  {
                    name: '收款账户',
                    children: []
                  }
                ]
              }, {
                name: '系统日志',
                children: [
                  {
                    name: '登录日志',
                    children: []
                  }, {
                    name: '操作记录',
                    children: []
                  }
                ]
              }
            ]
          }
        ]
    }
}


通过对children进行层层递归,直到找到最底层,进行匹配,不匹配的则调用数组的splice方法去除,代码如下

method(){
    filteNode(node, parent, index) {
        if (node instanceof Array) {
            for (var i = node.length - 1; i >= 0; i--) {
                this.filteNode(node[i], node, i);
            }
        } else {
            if (node.children) {
                for (var i = node.children.length - 1; i >= 0; i--)
                    this.filteNode(node.children[i], node.children, i);
            }
            if ((!node.children || node.children.length === 0) && this.hasPower(node) === false) {
                parent.splice(index, 1);
            }
        }
    },
    hasPower(node) {
        if(~node.name.indexOf(this.searchKey) || this.searchKey === ''){
            return true
        }else{
            return false
        }
    },
    // 调用方法
    async search() {
        this.loading = true
        // 请求数据
        const res = await this.$API.assets.assetsModel.getTree.get()
        if(res && res.status === 200){
            const filterData = res.data
            this.filteNode(filterData)
            this.list = filterData
        }
        this.loading = false
    }
}