效果

核心代码

    <el-input
        placeholder="搜索标签..."
        prefix-icon="el-icon-search"
        v-model="searchValue"
        style="margin-bottom: 20px;"
    >
    </el-input>
    <el-tree 
        ref="tree"
        :data="treeData" // 渲染所需要的值
        :props="defaultProps"  // 规则
        :default-expanded-keys="defaultAn" //  默认展开项
        :current-node-key="checkedKeys" // 高亮当前key
        :highlight-current="true"
        node-key="value"
        :filter-node-method="filterNode" // 过滤方法
        @node-click="handleNodeClick"> // 点击回调
              <span class="custom-tree-node" slot-scope="{ node }">
                  <i v-if="node.childNodes.length > 0" class="el-icon-folder-opened"></i>
                  <i v-else class="el-icon-discount"></i>
                  <span>{{ node.label }}</span>
                  <span v-if="node.childNodes.length > 0" style="color: #999999;">
                        ({{ node.childNodes.length }})      
                  </span>
              </span>
    </el-tree>
    watch: {
        searchValue: {
            handler(v) {
                // 监听输入框变化、进行实时过滤 
                this.$refs.tree.filter(v)
            }
        },
    },
    methods: {
        // 过滤掉无用数据
        filterNode(value, data, node) {
            if (!value) return true
            if(data.label.toLowerCase().indexOf(value.toLowerCase()) !== -1) return true
            return this.checkBelongToChooseNode(value, data, node)
        },
        // 筛选父级需要展示其子级
        checkBelongToChooseNode(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.label.toLowerCase().indexOf(value.toLowerCase()) !== -1) return true
                parentData = parentData.parent
                index ++
            }
            return false
        }
    }