element-ui el-tree树状搜索一级展示子级

element-ui el-tree树状插件

html部分

<el-tree

          class="tree"

          accordion

          :data="serviceData"

          show-checkbox

          :default-expanded-keys="['100000']"

          :filter-node-method="filterNode"

          node-key="id"

          ref="servicetree"

          highlight-current

          :props="defaultProps">

    </el-tree>

#js部分

watch: {

filterText(val) {

this.$refs.tree.filter(val);

}

},

filterNode(value, data,node) {

//如果共有四级菜单

if (!value) return true

let one = data.label.indexOf(value) !== -1

let two = node.parent && node.parent.data && node.parent.data.label && (node.parent.data.label.indexOf(value) !== -1)

let three = node.parent && node.parent.parent && node.parent.parent.data && node.parent.parent.data.label && (node.parent.parent.data.label.indexOf(value) !== -1)

let four= node.parent && node.parent.parent && node.parent.parent.parent && node.parent.parent.parent.data && node.parent.parent.parent.data.label && (node.parent.parent.parent.data.label.indexOf(value) !== -1)

let result_one = false

let result_two = false

let result_three = false

let result_four = false

if(node.level === 1) {

result_one = one

}else if(node.level === 2) {

result_two = one || two

}else if(node.level === 3) {

result_three = one || two || three

}else if(node.level === 4) {

result_three = one || two || three || four

}

return result_one || result_two || result_three || result_four

},

有问题加微:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容