zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    HDU 1813 Escape from Tetris
    BZOJ 2276 Temperature
    BZOJ 4499 线性函数
    BZOJ 3131 淘金
    HDU 5738 Eureka
    POJ 2409 Let it Bead
    POJ 1286 Necklace of Beads
    POJ 1696 Space Ant
    Fox And Jumping
    Recover the String
  • 原文地址:https://www.cnblogs.com/toughy/p/12667901.html
Copyright © 2011-2022 走看看