element in the tree lazy load the data back if no search interface search function

<template>>
    <div class="app-container">
      <el-form :inline="true" label-width="90px">
        <el-form-item>
          <el-input
            v -model = " Search " 
            size = " Mini " 
            placeholder = " Enter the service provider's name to search " />
        </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 : pending; 2 : reviewed; 3 : audit refuse; 4 : cancellation; 8 : Freeze; 9 : disabled), ->
            <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 {
       // mask layer 
      loading: to true ,
       // Form tree data 
      treeList: [],
      search: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    / * * Interface transfer place * /
    getList() {
      this.loading = true;
      treelist().then(response => {
        if(response.code === 200) {
          this.treeList = response.data;
          this.loading = false;
        }
      });
    },
    // Search 
    Search () {
     // determines if the search has not been entered search input box is not performed 
      IF ( the this .search! = "" ) {
         The this .getList ()
        rows the let = document.getElementsByClassName ( " EL-table__row " )
         // first remove the above class name 
        for (the let I = 0 ; I <rows.length; I ++ ) {
          rows[i].style.display=""
        }
        cells the let (= document.getElementsByClassName " the Cell " ) // All data
         // matching td index is a multiple of 7, when the processing for page number where you want to look at your td first vertical columns are a few? ? ? ? ? 
        For (I = the let . 7 ; I <cells.length; I ++ ) {
           IF (I% . 7 === 0 ) {
             IF ((cells [I] .textContent.indexOf ( the this .search)) === - . 1 ) { // fuzzy query parent element when there is no hidden 
              cells [I] .parentElement.parentElement.style.display = " none "  
              cells [I] .innerHTML = cells [I] .textContent// Parent elements expand icon hidden
               @ IF (rows.style.display = "none" && cells.length == rows.length) {
               //    this.noData = to true
               // } 
            } the else {
             // if matched expand the search data to get rid of small icons. And data type to achieve full alignment 
              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>

If there is something wrong or areas for improvement welcome! ! !