ElementUI Tree组件遇到的问题及高亮搜索

1. 实现的效果

2. 实现的代码

<div class="content-tree" style="width: 400px">
    <el-input
    v-model="filterText"
    placeholder="请输入关键字"
    style="margin: 20px 0"
    clearable
    ></el-input>
    <el-tree
    ref="tree"
    class="my-tree"
    :data="data"
    default-expand-all
    node-key="id"
    highlight-current
    :filter-node-method="filterTreeData"
    :props="{label: 'catalogName'}"
    >
    <div class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(node)" @mouseleave="mouseleave(node)">
    	 <! -- v-html  其中的某个变量值改变就会引起重新渲染 -->
        <span v-html="ruleTitle(node.label)"></span>
        <! -- 注意使用 v-show,不要使用 v-if -->
        <div v-show="node.show" class="tree-icon">
        <el-dropdown placement="bottom">
            <span class="el-dropdown-link">
            <i
                style="transform:rotate(90deg);"
                class="el-icon-more"
            />
            </span>
            <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="edit">编辑</el-dropdown-item>
            <el-dropdown-item command="delete">删除</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        </div>
    </div>
    </el-tree>
</div>

data() {
    filterText: '',
    data: [{
        id: 1,
        catalogName: '一级 1',
        children: [{
        id: 4,
        catalogName: '二级 1-1',
        children: [{
            id: 9,
            catalogName: '三级 1-1-1'
        }, {
            id: 10,
            catalogName: '三级 1-1-2'
        }]
        }]
    }, {
        id: 2,
        catalogName: '一级 2',
        children: [{
        id: 5,
        catalogName: '二级 2-1'
        }, {
        id: 6,
        catalogName: '二级 2-2'
        }]
    }, {
        id: 3,
        catalogName: '一级 3',
        children: [{
        id: 7,
        catalogName: '二级 3-1'
        }, {
        id: 8,
        catalogName: '二级 3-2'
        }]
    }]
}

watch: {
    filterText(newVal) {
        this.$refs.tree.filter(newVal)
    }
}

methods: {
    filterTreeData(value, data) {
      if (!value) {
        return data
      }
      return data.catalogName.indexOf(value) !== -1
    },
    // 高亮搜索的关键字
    ruleTitle(items) {
      const title = items
      const rep = new RegExp(this.filterText, 'g')
      const resDtring = `<span style="color: #145afe">${this.filterText}</span>`
      return title.replace(rep, resDtring)
    },
    // 鼠标移出
    mouseleave(node) {
      this.$set(node, 'show', false)
    },
    // 鼠标移入
    mouseenter(node) {
      this.$set(node, 'show', true)
    },
}

<style lang="less scoped>
.content-tree {
  padding: 20px;
  .my-tree {
    .custom-tree-node {
      display: flex;
      flex: 1;
      justify-content: space-between;
    }
  }
}
</style>

3. 遇到的问题

1、鼠标悬浮到dropdown的按钮上触发了 dropdown 但是死活选不上，后来排查原来出在 v-if 和 v-show 区别上

2、实现高亮筛选的时候 watch 里调用 filter 方法，必须要在 tree 上定义 filter-node-method 方法

4.扩充(多个关键词高亮搜索)

新需求： 输入框中的多个关键词高亮搜索

// this.keyword  是以 | 分割的字符串
var reg = new RegExp(`(${this.keyword})`, 'gi')
// $1是正则表达式中自带的匹配模块
const resDtring = `<span style='color:#145afe;'>$1</span>`
return title.replace(reg, resDtring)

如何理解 $1 参考文章地址