wanda-editer/src/components/edit/search_tree.vue

<template>
  <div>
    <a-input-search style="margin: 10px;width: 90%" placeholder="搜索" @change="onChange" />
    <el-tree
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"  :default-expand-all="false"
            :filter-node-method="filterNode" highlight-current  @node-click="checkChange"
            ref="tree">
    </el-tree>
  </div>
</template>

<script>
    export default {
        data() {
            return {
              filterText: '',
              defaultProps: {
                children: 'children',
                label: 'label'
              }
            };
        },
      props:{
        treeData:Array
      },
        methods: {
          onChange(e){
            this.$refs.tree.filter(e.target.value);
            if(e.target.value==''){
              for(let i=0;i<this.$refs.tree.$children.length;i++){
                this.$refs.tree.$children[i].expanded = false;
              }
            }
          },
            filterNode(value, data) {
              if (!value) return true;
              return data.label.indexOf(value) !== -1;
            },
            checkChange(data) {
              this.$emit('getTreeId',data.id)
            },
        }
    };
</script>

<style scoped lang="less">
.filter-tree{
  padding: 0 10px;
  /deep/ .el-tree-node__content{
    height:38px;
  }
  /deep/.el-tree-node:focus >.el-tree-node__content {
    background-color: #E1F2FF!important;
    color: #0091FF!important;
  }
}
</style>