只有两层的菜单，所以直接做了循环哈，不是那种n层菜单
<el-menu
:collapse="ifCollapse"
class="el-menu-vertical-demo"
:collapse-transition="false"
>
<div class="header">
<p class="header-title title-all" v-if="ifCollapse">数</p>
<p class="title-all" v-else>选择数据集</p>
</div>
<el-input placeholder="输入关键字过滤" v-model="filterText" clearable>
</el-input>
<el-submenu
:index="item.id + ''"
v-for="item in collectionInfo"
:key="item.name"
>
<template slot="title">
<i class="el-icon-folder-opened"></i>
<span slot="title">{{ item.name }}</span>
</template>
<el-menu-item-group v-for="child in item.children" :key="child.id">
<el-menu-item
:index="child.id + ''"
@click="dataCollectClick(item, child)"
:title="child.name"
>
{{ child.name }}</el-menu-item
>
</el-menu-item-group>
</el-submenu>
</el-menu>
// allCollectionInfo:[]
watch: {
filterText(val) {
let result = [];
this.filterNode(this.allCollectionInfo, val, result);
this.$nextTick(() => {
console.log('result', result);
this.collectionInfo = JSON.parse(JSON.stringify(result));
});
},
},
methods(){
filterNode(arr, val, result) {
let reg = new RegExp(val, 'i');
arr.forEach((item) => {
if (reg.test(item.name)) {
let index = result.findIndex((value) => {
return value.name === item.name;
});
if (index < 0) {
result.push(item);
}
} else {
if (item.children) {
item.children.forEach((child) => {
if (reg.test(child.name)) {
let index = result.findIndex((value) => {
return value.name === item.name;
});
if (index < 0) {
let fathObj = {
name: item.name,
id: item.id
};
let children = [];
children.push(child);
fathObj.children = children;
result.push(fathObj);
} else {
let childIndex = result[index].children.findIndex((value) => {
return value.name === child.name;
});
if (childIndex < 0) {
result[index].children.push(child);
}
}
}
});
}
}
});
},
}
// 左右折叠
handleCollapse() {
this.ifCollapse = !this.ifCollapse;
},