elementUI的el-table 树状表格本地模糊搜索并返回原有格式进行展示等

纯前端实现elementUI的 el-table树状表格的模糊搜索、关键字高亮...

el-table的树状表格功能，参照文档，按照指定格式赋值data，树状表格很容易就渲染成功了。

但是，接下来的，基于树状表格的延伸功能，就费了一点小心思了，故此记录一下（以下功能实现全部基于Vue2+elementUI项目）。

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

功能要求：

若父节点有，则该父节点下的所有子节点返回；若父节点没有，但子节点有，则该子节点及以上层级的父节点均需返回。

实现重点：

关键字匹配（name.indexOf(keyWords) > -1）
匹配到的数据重新组装成树形结构（循环、递归）

方法封装：

ini 复制代码

/**
 * @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;
 },

最终效果：

延伸：

若父节点有，仍需继续向下查询子节点是否匹配，而不是子节点全部返回，怎么处理？

将上述if里面的代码改成如下即可。

ini 复制代码

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

二、关键字高亮

功能要求：

在模糊搜索得到的新树状表格中，将匹配到的关键字高亮。

实现重点：

匹配关键字
替换关键字为带有标签的关键字
给标签添加样式

方法封装：

javascript 复制代码

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

页面渲染：

ini 复制代码

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

最终效果：

三、动态设置树状表格的展开/折叠

功能要求：

树形表格初始状态默认是折叠的，当关键字搜索后，树形表格变为展开状态。

实现重点：

官方提供了default-expand-all属性控制树形表格的展开折叠，但是只有初始化的时候是生效的，而动态修改是无效的。

所以我们每修改一次，就需要让表格重新渲染一次。

具体实现：

ini 复制代码

<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的值，来控制v-table组件（基于el-table二次封装的）的重新渲染。

注意，一定要加上nextTick()，或者延时器，否则，defaultExpandAll的更改会无效。推荐使用nextTick()，因为延时器会造成页面跳动。