// 现在el-tree组件，默认搜索所有级，如果只搜索到第二级就只显示第二级，但是想选择第三级的内容就选不到，很不友好，现在对此改造
// 改造完逻辑：
如果只搜到了第二级 则第二级折叠 然后可以展开查看第三级
如果只搜到了第三级 那就默认展开到第三级 只展示当前搜到的第三级
如果搜到了第二级和第三级 那就默认展开到第三级 展示第二级所有项
// el-tree
<el-input v-model="filterText" clearable placeholder="输入关键字进行过滤"></el-input>
<el-tree :ref="'paramsTreeRef' + inxKey" :data="selParamsTreeData" :filter-node-method="filterNode" :default-expanded-keys="expandedKeys" :highlight-current="true" :props="defaultProps" class="filter-tree" node-key="code" @node-click="selParamsTreeClick"></el-tree>
// watch 监听搜索
watch: {
filterText(val) {
if (val != '') {
this.expands = {};
this.$refs[this.paramsTreeRef].filter(val);
this.$nextTick(() => {
this.changeTreeNodeStatus(this.$refs[this.paramsTreeRef].store.root);
this.expandedKeys = Object.keys(this.expands);
});
}
},
},
// 改变节点的状态
changeTreeNodeStatus(node) {
if (node.level === 2) {
node.expanded = false;
}
for (let i = 0; i < node.childNodes.length; i++) {
// 改变节点的自身expanded状态
if (node.level === 2) {
node.childNodes[i].expanded = false;
}
if (node.childNodes[i].childNodes.length > 0) {
this.changeTreeNodeStatus(node.childNodes[i]);
}
}
},
filterNode(value, data, node) {
if (!value) return true;
// return data.name.indexOf(value) !== -1;
return this.chooseNode(value, data, node);
},
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
chooseNode(value, data, node) {
if (data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
if (node.level === 3) {
this.expands[node.data.code] = 1;
}
return true
}
const level = node.level
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false
}
// 先取当前节点的父节点
let parentData = node.parent
// 遍历当前节点的父节点
let index = 0
while (index < level - 1) {
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
return true
}
// 否则的话再往上一层做匹配
parentData = parentData.parent
index++
}
// 没匹配到返回false
return false
},
