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>

如果有不對或需要改進的地方 歡迎提出！！！