element中树形懒加载数据如果后台没有搜索接口 实现搜索功能

<template>>
    <div class="app-container">
      <el-form :inline="true" label-width="90px">
        <el-form-item>
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入服务商姓名进行搜索"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="Search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        row-key="svrId"
        ref="tabletree"
        :data="treeList"  
        :default-expand-all="false"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
           <el-table-column prop="svrName" label="姓名"></el-table-column>
        <el-table-column prop="svrTypeName" label="服务商类型" align="center" ></el-table-column>
        <el-table-column prop="svrMobile" label="手机号" align="center" ></el-table-column>
        <el-table-column prop="svrId" label="账号" align="center" ></el-table-column>
        <el-table-column prop="businessLevelName" label="等级" align="center" ></el-table-column>
        <el-table-column prop="status" label="状态" align="center" >
           <template slot-scope="scope">
             <!-- (1：待审核；2：已审核；3：审核拒绝；4：注销；8：冻结；9：禁用), -->
            <span v-if="scope.row.status === 1">待审核</span>
            <span v-if="scope.row.status === 2">已审核</span>
            <span v-if="scope.row.status === 3">审核拒绝</span>
            <span v-if="scope.row.status === 4">注销</span>
            <span v-if="scope.row.status === 8">冻结</span>
            <span v-if="scope.row.status === 9">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
    </el-table>
    </div>
</template>

<script>
import { treelist } from "@/api/svrmanage/apply"
export default {
  name: "treeList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表格树数据
      treeList: [],
      search: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 调接口的地方 */
    getList() {
      this.loading = true;
      treelist().then(response => {
        if(response.code === 200) {
          this.treeList = response.data;
          this.loading = false;
        }
      });
    },
    //搜索
    Search() {
    //判断 如果搜索输入框没输入则不执行 搜索
      if(this.search != ""){
        this.getList()
        let rows = document.getElementsByClassName("el-table__row")
        //先去除上面的类名
        for(let i = 0; i < rows.length; i++){
          rows[i].style.display=""
        }
        let cells = document.getElementsByClassName("cell")//全部的数据
        // 匹配td索引为7的倍数的时候 进行页面处理 这里你要数一下你的第一竖列的td都是几？？？？? 
        for(let i=7;i<cells.length;i++){
          if(i%7===0) {
            if((cells[i].textContent.indexOf(this.search)) === -1){//模糊查询 不存在的时候 父元素隐藏 
              cells[i].parentElement.parentElement.style.display="none" 
              cells[i].innerHTML = cells[i].textContent // 父元素展开小图标隐藏
              // if(rows.style.display="none" && cells.length == rows.length) {
              //   this.noData = true
              // }
            }else{
            // 如果匹配到搜索数据 去除掉展开小图标。并且数据类型全部对齐实现
              cells[i].innerHTML = cells[i].textContent
            }
          }
        }
        // 隐藏展开关闭小图标
        // let icon = document.getElementsByClassName('el-table__expand-icon')
        // for(let i=0;i<icon.length;i++){
        //   icon[i].style.display="none"
        // }
      }else{
        this.treeList = [];
        this.getList()
      }
    },
  }
};
</script>

如果有不对或需要改进的地方 欢迎提出！！！