el-table 目录树列表本地实现模糊查询

table目录树结构实现模糊查询

 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"><el-form-item label="名称:" prop="Name"><el-input v-model="queryParams.Name" placeholder="请输入子网名称" clearable style="width: 240px"@keyup.enter.native="query" /></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="query">查询</el-button></el-form-item></el-form>

表格使用的是el-table；

表格树形格式： 

:tree-props="{ children: 'childSubnetwork', hasChildren: 'hasChildren' }"

 // 本地搜索方法localSearch() {const searchText = this.queryParams.Name?.toLowerCase() || '';if (!searchText) {this.table.data.data = this.tableDataBackup;return;}const filterData = (data) => {return data.filter(item => {const match = item.kName?.toLowerCase().includes(searchText);if (item.childSubnetwork && item.childSubnetwork.length > 0) {const filteredChildren = filterData(item.childSubnetwork);if (filteredChildren.length > 0) {item.childSubnetwork = filteredChildren;return true;}}return match;});};this.table.data.data = filterData(JSON.parse(JSON.stringify(this.tableDataBackup)));},// 查询接口query() {if (this.queryParams.Name) {this.localSearch();} else {this.loadData(1, this.table.data.pageSize || 50);}},loadData(pageNo, pageSize,) {this.loading = true;let page = pageNo - 1;let params = {num: pageSize,page: page,};querySubnetworkTree(params).then((data) => {this.table.data.data = data.data;this.tableDataBackup = JSON.parse(JSON.stringify(data.data));this.table.data.total = data.data.totalElements;this.table.data.page = pageNo;this.table.data.pageSize = pageSize;this.loading = false;});},