antd vue 树结构模糊查询关键字字高亮

官方文档给的根本没法用，今天给大家带来一段简单封装的代码

样例：

html结构：

其中最重要的就是中间的插槽了，我们采用span拼接的方式来实现关键字高亮效果

<a-input-search
  placeholder="请输入数据集关键字"
  enter-button
  v-model="searchStr"
  @search="onSearch" />
<a-tree
  :expanded-keys="expandedKeys"
  v-model="treeVal"
  show-icon
  :icon="getIcon"
  checkable
  :auto-expand-parent="autoExpandParent"
  :tree-data="treeData"
  :replace-fields="replaceFields"
  @check="onCheck"
  @expand="onExpand"
>
  <template slot="title" slot-scope="item">
    <span v-if="item.text.indexOf(searchValue) > -1">
      <span>{{ item.text.substr(0,item.text.indexOf(searchValue)) }}</span>
      <span style="color: #f50">{{ searchValue }}</span>
      <span>{{ item.text.substr(item.text.indexOf(searchValue) + searchValue.length) }}</span>
    </span>
    <span v-else>{{ item.text }}</span>
  </template>
</a-tree>

data状态：

replaceFields为树结构中的数据字段，这样就省去了重新遍历更该字段

data () {
  return {
    backupsExpandedKeys: [],
    sendSaveList: [],
    currentText: '',
    autoExpandParent: true,
    expandedKeys: [],
    treeVal: [],
    searchStr: '',
    searchValue: '',
    treeData: [],
    // 如果数据字段有调整，下面所有方法的字段也需调整
    replaceFields: {
      children: 'children',
      title: 'text',
      key: 'id'
    }
  }
},

功能部分：

onExpand (val, e) {
   this.expandedKeys = val
 },
// 点击搜索进行模糊筛选
onSearch () {
  this.searchValue = this.searchStr
  if (this.searchValue === '') {
    this.expandedKeys = []
  } else {
    this.expandedKeys = []
    this.backupsExpandedKeys = []
    const candidateKeysList = this.getkeyList(this.searchValue, this.treeData, [])
    candidateKeysList.forEach(
      (item) => {
        const key = this.getParentKey(item, this.treeData)
        if (key && !this.backupsExpandedKeys.some((item) => item === key)) this.backupsExpandedKeys.push(key)
      }
    )
    const { length } = this.backupsExpandedKeys
    for (let i = 0; i < length; i++) {
      this.getAllParentKey(this.backupsExpandedKeys[i], this.treeData)
    }
    this.expandedKeys = this.backupsExpandedKeys.slice()
  }
},
// 获取节点中含有value的所有key集合
getkeyList (value, tree, keyList) {
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.text.indexOf(value) > -1) {
      keyList.push(node.id)
    }
    if (node.children) {
      this.getkeyList(value, node.children, keyList)
    }
  }
  return keyList
},
// 该递归主要用于获取key的父亲节点的key值
getParentKey (key, tree) {
  let parentKey
  let temp
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.id === key)) {
        parentKey = node.id
      } else if (temp = this.getParentKey(key, node.children)) {
        parentKey = temp
      }
    }
  }
  return parentKey
},
// 获取该节点的所有祖先节点
getAllParentKey (key, tree) {
  let parentKey
  if (key) {
    parentKey = this.getParentKey(key, tree)
    if (parentKey) {
      if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
        this.backupsExpandedKeys.push(parentKey)
      }
      this.getAllParentKey(parentKey, tree)
    }
  }
}