![](https://i-blog.csdnimg.cn/blog_migrate/a767610071c49f27a4b9db5005526058.png)
![](https://i-blog.csdnimg.cn/blog_migrate/383d9ea0cc55265defbd47b21b3166a8.png)
<el-input
v-model="projectName"
placeholder="请输入名称"
clearable
maxlength="10"
@clear="clearTree"
/>
<el-divider />
<el-tree
ref="tree"
class="filter-tree"
:data="treeList"
:props="defaultProps"
default-expand-all
node-key="id"
:highlight-current="highlightCurrent"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
>
<div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label">
<span>{{ node.label }}</span>
<div class="button-group" @click.stop="() => {}">
<el-link size="mini" type="primary" icon="el-icon-circle-plus-outline" @click.stop="onAddType(data)" />
<el-link size="mini" type="primary" icon="el-icon-delete" @click.stop="onDelType(data)" />
</div>
</div>
</el-tree>
projectName: '',
treeList: [],
defaultProps: {
children: 'children',
label: 'name'
},
watch: {
projectName: {
handler(v) {
// 监听输入框变化、进行实时过滤
this.$refs.tree.filter(v)
}
}
},
methods: {
// 过滤掉无用的数据
filterNode(value, data, node) {
if (!value.trim()) return true
if (data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) { return true }
return this.checkNodes(value, data, node)
},
// 筛选父级所需要的子级
checkNodes(value, data, node) {
const level = node.level
if (level === 1) return false
let parentData = node.parent
let index = 0
while (index < level - 1) {
if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) return true
parentData = parentData.parent
index++
}
return false
},
// 清空项目树搜索框
clearTree() {
this.getOrganizarionTree()
},
}