Element ui tree 搜索
搜索框
属性
:filter-node-method="filterNode" 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏
<el-input v-model="filterText"></el-input> <el-tree ref="space" id="modelTree" :data="spaceTreeData" :props="defaultProps" show-checkbox node-key="nodeId" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" :render-content="renderContent" :filter-node-method="filterNode" @node-click="handleNodeClick"></el-tree>
数据
data() { return { //空间树数据 spaceTreeData: [], //默认树结构的输出格式 defaultProps: { children: 'children', label: 'name' }, filterText: '', } },
方法
//监听搜索框的查询参数变化,然后进行过滤 watch:{ filterText(val) { this.$refs.space.filter(val) } }
filter触发过滤事件
methods:{
//优化之后的代码 不管有几级都可以适用,不过用了递归,量太大还是会崩溃,这个后续需要优化 filterNode(value, data, node) { if (!value) { return true } let level = node.level let _array = [] //这里使用数组存储 只是为了存储值。 this.getReturnNode(node, _array, value) let result = false _array.forEach(item => { result = result || item }) return result }, getReturnNode(node, _array, value) { let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1 isPass ? _array.push(isPass) : '' this.index++ console.log(this.index) if (!isPass && node.level != 1 && node.parent) { this.getReturnNode(node.parent, _array, value) } }
}