1. 程式人生 > 其它 >el-tree 搜尋 節點過濾 包含下級 節點過濾載入對應的子節點

el-tree 搜尋 節點過濾 包含下級 節點過濾載入對應的子節點

原文地址:https://blog.csdn.net/klousYG/article/details/111247188

<template>
    <div>
        <el-input placeholder="輸入關鍵字進行過濾" v-model="filterText"></el-input>
        <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
ref="tree"> </el-tree> </div> </template> <script> export default { data() { return { filterText: '', data: [{id: 1, label: '一級 1', children: [{id: 4, label: '二級 1-1', children: [{id: 9, label: '三級 1-1-1'}, {id: 10, label: '三級 1-1-2'}] }] }, {id:
2, label: '一級 2', children: [{id: 5, label: '二級 2-1'}, {id: 6, label: '二級 2-2'}] }, {id: 3, label: '一級 3', children: [{id: 7, label: '二級 3-1'}, {id: 8, label: '二級 3-2'}] }], defaultProps: {children: 'children', label: 'label'} } } methods: { filterNode(value, data, node) {
if (!value) return true let parentNode = node.parent, labels = [node.label], level = 1 while (level < node.level) { labels = [...labels, parentNode.label] parentNode = parentNode.parent level++ } return labels.some(label => label.indexOf(value) !== -1) }, }, watch: { filterText(val) { this.$refs.tree.filter(val); } }, } </script>