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 } }