el-table树状表格实现本地模糊搜索和关键字高亮

文
章
目
录

• 一、前端树状表格模糊搜索功能的实现
• （一）功能需求
• （二）实现关键要点
• （三）详细代码
• （四）功能拓展
• 二、树状表格关键字高亮的实现
• （一）功能需求说明
• （二）实现步骤
• （三）代码与页面渲染
• 三、动态控制树状表格展开与折叠
• （一）功能需求
• （二）实现难点与解决方案

大家应用也经常使用ElementUI的el–table组件搭建树状表格，按照ElementUI官方文档的规范，给data赋指定格式的值，树状表格便能轻松渲染出来。不过，在实际应用场景里，树状表格的一些扩展功能实现起来却有一点难度，今天就来详细说下在Vue2 + ElementUI项目中，如何实现树状表格本地模糊搜索并返回原有格式进行展示以及树状表格关键字高亮的实现。

一、前端树状表格模糊搜索功能的实现

（一）功能需求

在树状表格进行模糊搜索时，要遵循特定规则：若父节点包含搜索关键字，那么该父节点下的所有子节点都应返回；若父节点不包含，但子节点包含，那么该子节点及其以上层级的父节点都要返回。

（二）实现关键要点

实现该功能的核心在于关键字匹配，通过name.indexOf(keyWords) > -1语句来判断某个节点的名称是否包含搜索关键字。此外，还需将匹配到的数据重新组装成树形结构，这一过程需要借助循环和递归算法。

（三）详细代码

/**
 * @param treeData 原始树形数据
 * @param inputValue 用户搜索的关键字 
 * @param key 被匹配的对象（键名）
 * @return Array 匹配到的树形数据
 */
filterTree(treeData, inputValue, key) {
    let newTreeData = [];
    treeData.forEach(item => {
        if (item[key].indexOf(inputValue) > -1) { 
            newTreeData.push(item);
        } else {
            if (item.children && item.children.length > 0) {
                // 父级不匹配，继续向下查询子级是否匹配
                const arr = this.filterTree(item.children, inputValue, key);
                // 如果子级匹配，将符合条件的子级和父级push到目标数组中
                if (arr && arr.length > 0) {
                    const obj = {
                       ...item,
                        children: arr
                    };
                    newTreeData.push(obj);
                }
            }
        }
    });
    return newTreeData;
}

上述代码中，filterTree函数接收原始树形数据treeData、搜索关键字inputValue以及匹配键名key作为参数。通过遍历treeData，对每个节点进行关键字匹配。若节点匹配，直接将其添加到newTreeData中；若节点不匹配但有子节点，则递归调用filterTree函数检查子节点，若子节点匹配，将父节点和匹配的子节点组装后添加到newTreeData。

（四）功能拓展

如果需求变更为父节点匹配后仍需继续向下查询子节点是否匹配，而不是直接返回全部子节点，处理方式很简单。将匹配父节点时的代码修改如下：

if (item[key].indexOf(inputValue) > -1) { 
    // 父级匹配，继续向下查询子级是否匹配
    const arr = this.filterTree(item.children, inputValue, key);
    const obj = {
       ...item,
        children: arr
    };
    newTreeData.push(obj);
} 

修改后的代码在父节点匹配时，进一步递归查询子节点，并将查询结果组装后添加到新的树形数据中。

二、树状表格关键字高亮的实现

（一）功能需求说明

在完成模糊搜索得到新的树状表格后，需要将匹配到的关键字进行高亮显示，以便用户快速识别。

（二）实现步骤

实现关键字高亮主要有三步：首先要匹配关键字；然后将匹配到的关键字替换为带有特定标签的关键字；最后给这个标签添加样式，使其在页面上呈现高亮效果。

（三）代码与页面渲染

hightLightText(text) {
    if (text) {
        const reg = new RegExp( this.inputValue, \'gi\');// 动态正则表达式
        return text.replace(reg, `<span style=\"color: #1F5FB1;\">${this.inputValue}</span>`);// 使用replace替换
    }
}

上述hightLightText函数接收文本text作为参数，通过创建动态正则表达式来匹配搜索关键字inputValue，并使用replace方法将匹配到的关键字替换为带有<span>标签且设置了颜色样式的文本。

在页面渲染时，通过如下代码实现关键字高亮：

<template v-slot:name=\"record\">
    <span v-html=\"hightLightText(record.name)\"></span>
</template>

这段代码利用v-slot自定义列模板，在name列中，将record.name传递给hightLightText函数进行处理，最终以HTML形式渲染，实现关键字高亮效果。

三、动态控制树状表格展开与折叠

（一）功能需求

树状表格在初始状态下默认是折叠的，当进行关键字搜索后，需要将其变为展开状态，方便用户查看搜索结果。

（二）实现难点与解决方案

ElementUI提供的default-expand-all属性可以控制树形表格的展开折叠，但它仅在初始化时生效，无法满足动态修改的需求。为了解决这个问题，我们可以通过控制表格重新渲染来实现动态展开折叠。

<v-table
    ref=\"table\"
    v-if=\"refreshTable\"
    :loading=\"loading\"
    :dataSource=\"dataSource\"
    :columns=\"columns\"
    :defaultExpandAll=\"defaultExpandAll\"        
>     
</v-table>

doSearch() {
    this.refreshTable = false;
    this.$nextTick(() => {
        this.refreshTable = true;
    });
    this.defaultExpandAll = true;
}

在上述代码中，当搜索事件doSearch触发时，先将refreshTable设置为false，然后利用$nextTick方法，在下一个DOM更新周期将其设置为true，从而实现v-table组件（基于el – table二次封装）的重新渲染。同时，将defaultExpandAll设置为true，使表格在重新渲染后处于展开状态。这里推荐使用$nextTick方法，而不建议使用延时器，因为延时器可能会导致页面跳动，影响用户体验。

通过上述详细的步骤和代码解析，在Vue2 + ElementUI项目中，实现el-table树状表格的模糊搜索、关键字高亮以及动态展开折叠等进阶功能便不再困难。希望这些内容能为前端开发者在实际项目中提供有效的参考和帮助。