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