el-tree 搜索高亮match部分

3.0以下不支持jpx

通过slot-scope方式

        <el-input
          placeholder="Search"
          size="small"
          v-model="filterText"
          clearable
          @input="onSearch"
        ></el-input>
        <el-tree
          ref="tree"
          show-checkbox
          node-key="key"
          :data="treeData"
          :default-checked-keys="defaultCheckedKeys"
          :default-expanded-keys="expandList"
          @check-change="onCheck"
          style="height:260px;overflowY:auto;padding-top:5px"
        >
          <span class="custom-tree-node" slot-scope="{ node }">
            <span style="margin-left:4px">{{ highLight(node.label)[0] }}</span>
            <span style="color:red;margin:0 -4px 0 -4px">{{ highLight(node.label)[1] }}</span>
            <span>{{ highLight(node.label)[2] }}</span>
          </span>
        </el-tree>


    onSearch () {
      if (this.filterText === '') {
        this.treeData = this.treeDataOrigin
        this.expandList = []
        this.defaultCheckedKeys = this.checkedKeys
        return
      }
      var treeMatched = [] // 树结构
      var expandList = []
      for (var i in this.treeDataOrigin) {
        var parentMatch = this.treeDataOrigin[i].title.indexOf(this.filterText) > -1
        this.$refs.tree.setCurrentKey(this.treeDataOrigin[i].key)
        var childrenMatch = false
        var children = []
        for (var j in this.treeDataOrigin[i].children) {
          if (this.treeDataOrigin[i].children[j].title.indexOf(this.filterText) > -1) {
            childrenMatch = true
            children.push(this.treeDataOrigin[i].children[j])
          }
        }
        // 命中父节点未命中子节点 全部展开
        if (parentMatch) {
          treeMatched.push(this.treeDataOrigin[i])
          expandList.push(this.treeDataOrigin[i].value)
        } else if (!parentMatch && childrenMatch) {
          // 子节点命中
          var item = JSON.parse(JSON.stringify(this.treeDataOrigin[i]))
          // 仅展示命中的子节点
          item.children = children
          treeMatched.push(item)
          expandList.push(this.treeDataOrigin[i].value)
        }
      }
      this.treeData = treeMatched
      this.expandList = expandList
      this.defaultCheckedKeys = this.checkedKeys
    },


    highLight (label) {
      var index = label.indexOf(this.filterText)
      if (index > -1) {
        var beforeStr = label.substr(0, index);
        var afterStr = label.substr(index + this.filterText.length);
        return [beforeStr, this.filterText, afterStr]
      }
      return [label, "", ""]
    },

3.0以上支持jpx

renderContent (h, { node, data, store }) {
      const index = node.label.indexOf(this.filterText);
      const beforeStr = node.label.substr(0, index);
      const afterStr = node.label.substr(index + this.filterText.length)
      const label = index > -1 ? (<span>{beforeStr}</span>)(<span style={'color: red'}> {this.filterText} </span>)(<span>{afterStr} </span>) : (<span>{node.label}</span>)
      return label