html代码:
<el-tree
class="common-filter-tree fx-flex-auto mt15 overflow-auto"
:props="defaultProps"
:filter-node-method="filterNode"
:load="loadNode"
lazy
ref="tree"
>
<div style="width: 100%;" slot-scope="{ data }">
<div class="fx-row fx-between-center" style="width: 100%;">
<div style="display: flex; align-items: center;">
<img
v-if="data.type === 'base'"
src="../../assets/icon/basis/水电站2.png"
/>
<span style="margin-left: 10px;display: inline-block">
<el-tooltip
class="item"
effect="dark"
:content="data.label"
placement="top"
v-if="data.label.length > 10"
>
<span>{{ data.label.substring(0, 9) }}...</span>
</el-tooltip>
<span v-else>{{ data.label }}</span>
</span>
</div>
<div class="tree-node-badge ph11 mr10">
{{ data.count ? data.count : 0 }}
</div>
</div>
</div>
</el-tree>
js代码:
data() {
return {
filterText: "",
defaultProps: {
children: "children",
label: "label",
isLeaf: "leaf"
}
};
},
methods: {
onInputChange(event) {
this.$refs.tree.filter(event);
},
filterNode(value, data, node) {
//查询显示当前节点
/*if (!value) return true;
return data.label.indexOf(value) !== -1;*/
//如果共有三级菜单,查询显示当前节点及所有子节点
if (!value) return true;
let if_one = data.label.indexOf(value) !== -1;
let if_two =
node.parent &&
node.parent.data &&
node.parent.data.label &&
node.parent.data.label.indexOf(value) !== -1;
let if_three =
node.parent &&
node.parent.parent &&
node.parent.parent.data &&
node.parent.parent.data.label &&
node.parent.parent.data.label.indexOf(value) !== -1;
let result_one = false;
let result_two = false;
let result_three = false;
if (node.level === 1) {
result_one = if_one;
} else if (node.level === 2) {
result_two = if_one || if_two;
} else if (node.level === 3) {
result_three = if_one || if_two || if_three;
}
return result_one || result_two || result_three;
},
getTreeData(node, fn) {
queryBasinTree(node)
.pipe(
map(data => {
fn(data);
})
)
.subscribe();
},
loadNode(node, resolve) {
if (node.level === 0) {
const baseTree = JSON.parse(sessionStorage.getItem("baseData"));
if (baseTree) {
return resolve(baseTree);
} else {
this.getTreeData({ type: "", id: "" }, data => {
return resolve(data ? data : []);
});
}
} else {
this.getTreeData({ type: node.data.type, id: node.data.id }, data => {
if (data) {
data.forEach(
item =>
(item.leaf =
item.type === "river" ? item.type === "river" : !item.count)
);
return resolve(data);
}
});
}
return resolve([]);
}
}
数据返回格式:
实现效果: