vue ant design 选中搜索数据高亮

<a-tree
          :tree-data="treeData"
          v-model="tree.checkedKeys"
          :expanded-keys="tree.expandedKeys"
          :replaceFields="tree.replaceFields"
          :checkable="tree.checkable"
          :checkStrictly="tree.checkStrictly"
          :disabled="tree.disabled"
          :auto-expand-parent="tree.autoExpandParent"
          @check="onCheck"
          @select="onSelect"
          @expand="onExpand"
        >
        <template slot="name" slot-scope="{name}">
          <span v-if="name.indexOf(tree.searchValue) > -1">
            {{name.substr(0, name.indexOf(tree.searchValue))}}
            <span style="color: #f50">{{tree.searchValue}}</span>
            {{name.substr(name.indexOf(tree.searchValue) + tree.searchValue.length)}}
          </span>
          <span v-else>{{name}}</span>
        </template>
        </a-tree>

方法中

data中数据构造
 tree: {
        searchValue: '',
        checkable: true,
        checkStrictly: false,
        autoExpandParent: true,
        disabled: false,
        checkedKeys: [],
        selectedKeys: [],
        expandedKeys: [],
        replaceFields: {
          key:'id',
          title:'name',
          value: 'id',
          children: 'childList'
        }
      },

给数据增加插槽
const scopedSlots = { title:'name' }--与插槽的name一致
this.treeData.forEach(item => {
        this.treescopedSlots(item, scopedSlots)
      })
--递归方法加插槽
treescopedSlots(item,scopedSlots){
      item.scopedSlots = scopedSlots;
        if(item.childList){
          item.childList.forEach(
            child=>{
            child.scopedSlots = scopedSlots
            if(item.childList){
              this.treescopedSlots(child,scopedSlots)
            }
          }
          )
        }
    },