el-tabel 树状表格前端实现模糊搜索功能

<template>
  <div class="m-page">
    <el-form class="m-card"
             :model="queryParams"
             ref="queryForm"
             :inline="true"
             label-width="68px"
             style="height:62px">
      <el-form-item label="材料名称"
                    prop="name">
        <el-input v-model="name"
                  placeholder="请输入材料名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini" @click="searchData">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini" @click="resetData">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData"
              style="width: 100%;margin-top:10px;"
              row-key="id"
              default-expand-all
              class="tableTree"
              height="calc(100vh - 152px)"
              header-cell-class-name="m-table-header"
              :tree-props="{children: 'children'}">
      <el-table-column prop="code"
                       label="编码" />
      <el-table-column prop="name"
                       label="材料名称" />
      <el-table-column prop="spec"
                       label="规格" />
      <el-table-column prop="unit"
                       label="单位" />
    </el-table>
  </div>
</template>
<script >
import Vue from 'vue'
import { materialAll } from '@/services/engineeringManage/standardMaterialLibrary'
export default Vue.extend({
  data () {
    return {
      tableData: [],
      queryParams: {},
      name: ''
    }
  },
  mounted () {
    this.getMaterialAll()
  },
  methods: {
    async getMaterialAll () {
     // 根据后端接口获取到的树状数据
      const res = await materialAll()
      console.log(res, '列表数据6+++')
      if (res.code === 200) {
        this.tableData = res.data
      }
    },
    resetData(){
      this.name = ''
      this.searchData()
    },
    searchData(){
      if(this.name){
      return  this.tableData = this.rebuildData(this.name.trim(),this.tableData)
      }
      this.getMaterialAll()
    },
    // 重点代码 根据name字段模糊匹配树状结构数据，最后将处理好的数据返回出来
    rebuildData (value, arr){
      if (!arr) {
        return []
      }
      const newarr = [];
      arr.forEach(element => {
      // indexOf用来判读当前节点name字段是否包含所搜索的字符串value
      // 返回值：包含则返回索引值，反之返回-1
        if (element.name.indexOf(value) > -1) {
          const ab = this.rebuildData(value, element.children);
          const obj = {
            ...element,
            children: ab
          }
          newarr.push(obj);
        } else {
        // 判断当前节点知否有子节点，并且子节点中有数据，有数据继续递归查找
          if (element.children && element.children.length > 0) {
            const ab = this.rebuildData(value, element.children);
            const obj = {
              ...element,
              children: ab
            };
            if (ab && ab.length > 0) {
              newarr.push(obj);
            }
          }
        }
      });
      return newarr
    }
  }
})
</script>