<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>
如果有不对或需要改进的地方 欢迎提出!!!