vue+antd使用andt-tree实现可搜索的tree

效果：

默认选择“全部范围”，不展示组织结构tree
选择“组织结构”显示组织结构tree，搜索自动展开相应tree节点，并标红显示

组件代码：

<template>
    <div>
        <a-modal
                :title="title"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleSubmit"
                @cancel="handleCancel"
        >
            <b>{
   {
    tip }}</b><br/><br/>
            <a-radio-group v-model="value" @change="onChangeRadio">
                <a-radio :style="radioStyle" :value="1">
                    全部范围
                </a-radio>
                <a-radio :style="radioStyle" :value="2">
                    选择组织结构
                </a-radio>
            </a-radio-group>
            <div v-if="value === 2" class="tree-box">
                <a-input-search v-model="searchStr" placeholder="输入搜索项" style="width:200px;" @change="onSearch"></a-input-search>
                <a-tree
                        v-model="checkedKeys"
                        checkable
                        :auto-expand-parent="autoExpandParent"
                        :defaultExpandAll="defaultExpandAll"
                        :expanded-keys="expandedKeys"
                        :tree-data="treeData"
                        :selected-keys="selectedKeys"
                        :replaceFields="replaceFields"
                        @expand="onExpand"
                        @select="onSelect"
                >
                    <template slot='title' slot-scope="{name}">
                        <span v-html="name.replace(new RegExp(searchValue, 'g'),'<span style=color:#f50>' + searchValue + '</span>')"></span>
                    </template>
                </a-tree>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    getTree } from '@/api/tree';

export def