elemento de la carga perezosa árbol de los datos de nuevo si no hay función de búsqueda de búsqueda de interfaz

<plantilla >> 
    <div clase = " app-contenedor " > 
      <el-forma: inline = " verdad " etiqueta-width = " 90px " > 
        <el-form-item> 
          <el- entrada 
            v -model = " buscar " 
            tamaño = " mini " 
            marcador de posición = " 输入服务商姓名进行搜索" /> 
        </-form-ítem el> 
        <-form-ítem el> 
          <tipo el-botón = " primaria "icon = " el-icono-buscar " size = " Mini " @ clic = " Buscar " >搜索el-botón </> 
        <forma ítems EL /> 
      <el-forma /> 
      <el- tabla 
        v -loading = " carga " 
        fila tecla = " svrId " 
        ref = " tabletree " 
        : datos = " treelist "   
        : por defecto -expand-all = " falsa "
        : Árbol -props =" {Niños: 'niños', hasChildren: 'hasChildren'} " > 
           <el-table-column prop = " svrname " label = " 姓名" > </ el-table-column> 
        <el-table-column prop = " svrTypeName " label = " 服务商类型" align = " centro " > </ el-table-column> 
        <el-table-column prop = " svrMobile " label = " 手机号" align = "centro " > </ el-table-column> 
        <el-table-column prop =" SvrId " label = " 账号" align = " centro " > </ el-table-column> 
        <prop el-table-column = " businessLevelName " label = " 等级" align = " centro " > </ el-mesa- columna> 
        <prop el-table-column = " status " label = " 状态" align = " centro " > 
           <plantilla ranura-scope = "alcance " > 
             <! - (1 : Pendiente; 2 : revisado; 3 : desperdicios de auditoría; 4 : cancelación; 8 : Freeze; 9 : desactivado), -> 
            <span V- IF = " scope.row.status === 1 " > BE auditoría </ span> 
            <span V- IF = " scope.row.status === 2 " > revisado </ span> 
            <span V- IF = " scope.row.status ===. 3 " > auditoría negaron < / span> 
            <span V- IF = " scope.row.status ===. 4 " > cancelación </ span>
            <span v- si =" Scope.row.status === 8 " >冻结</ span> 
            <span v- si = " scope.row.status === 9 " >禁用</ span> 
          </ template> 
        </ el-mesa- columna> 
        <etiqueta el-table-column = " 创建时间" align = " centro " prop = " createTime " > 
          <plantilla ranura-scope = " alcance " > 
            <span> {{parseTime (scope.row.createTime)}} </ span> 
          </ template>
        </ el-table-column> 
    </ el-table> 
    </ div>
</ Plantilla> 

<script> 
Importación} {treelist de  " @ / API / svrmanage / Aplicar " 
Exportación por defecto { 
  nombre: " treelist " , 
  de datos () { 
    retorno {
       // máscara de capa 
      de carga: true ,
       // los datos de formulario de árboles 
      treelist: [], 
      Buscar: '' , 
    }; 
  }, 
  Creado () { 
    el este .getList (); 
  }, 
  Métodos: { 
    * / * interfaz de transferencia local de * / 
    la GetList () { 
      los esta = .loadingtrue ; 
      treelist () entonces (. Respuesta => {
         SI (response.code === 200 es ) {
           el presente .treeList = response.data;
           el presente .loading = false ; 
        } 
      }); 
    }, 
    // buscar 
    Buscar () {
     // determina si la caja de entrada de búsqueda no realizó una entrada de búsqueda 
      SI ( el presente .search! = "" ) {
         el presente .getList () 
        las filas vamos a = document.getElementsByClassName ( " eL-table__row " )
         //Lo anterior quitar primero el nombre de clase 
        para (el LET I = 0 ; I <rows.length; I ++ ) { 
          filas [I] .style.display = "" 
        } 
        las células vamos (document.getElementsByClassName = " célula " ) // todos los datos
         // realizar índice coincidente td el tiempo es un múltiplo de 7 páginas en las que desea contar el número de tramitar su td primeras columnas verticales son unos pocos? ? ? ? ? 
        Para (I = el let 7. ; I <cells.length; i ++ ) {
           IF (I% . 7 === 0 ) {
             IF ((células [I] .textContent.indexOf ( el este .search)) === - . 1 ) { //consulta difusa no existe cuando el elemento primario oculto 
              células [i] .parentElement.parentElement.style.display = " none "  
              células [i] .innerHTML = células [i] .textContent // elemento padre expandir pequeño icono escondido
               // SI ( = rows.style.display "ninguna" && cells.length == rows.length) {
               //    this.noData = true
               // } 
            } else {
             // Si se quita los datos coincidentes para expandir el icono de búsqueda. Y el tipo de datos para lograr la alineación completos 
              células [I] = .innerHTML células [I] .textContent 
            } 
          } 
        } 
        // ocultar expanden icono Cerrar
         @dejar icon = document.getElementsByClassName ( 'el-table__expand-icon')
         // para (dejar que i = 0; i <icon.length; i ++) {
         //    icono [i] .style.display = "ninguna"
         // } 
      } más {
         este .treeList = [];
        este .getList () 
      } 
    }, 
  } 
}; 
</ script>

Si hay algo incorrecto o áreas de mejora bienvenida! ! !

Supongo que te gusta

Origin www.cnblogs.com/toughy/p/12667901.html
Recomendado
Clasificación