iview Tree 模糊搜索,返回符合条件的节点,和整条数据链
<Input v-model="searchWord" @on-enter='searchTree(value,treeList)' />
<Tree :data="treeList && treeList.length > 0 ? treeList:[]" ></Tree>
export default {
name: 'selectTreePage',
data() {
return {
value:'',
treeList:[],
treeListInit:[],
arr: [
{
name: 'a1',
children: [
{
name: 'a11',
children: null
},
{
name: 'a22',
children: null
}
]
},
{
name: 'b1',
children: [
{
name: 'b11',
children: null
}
]
},
{
name: 'c1',
children: null
}
],
}
},
methods:{
searchTree(value, arr){
if (!value) {
this.getTreeList()
}
const rebuildData=(value, treeList) => {
let newarr = [];
arr.forEach(element => {
if (element.children && element.children.length) {
if (element.name.indexOf(value) > -1) {
element.expand = true;
newarr.push(element);
}
const ab = rebuildData(value,element.children);
const obj = {
...element,
expand: true,
children: ab
};
if (ab && ab.length) {
newarr.push(obj);
}
} else {
if (element.name.indexOf(value) > -1) {
newarr.push(element);
}
}
});
return newarr;
};
this.treeList = [];
this.treeList = rebuildData(value, arr);
}
},
getTreeList(){
......
}
}