一，纯前端过滤表格数据

 <el-input v-model="searchName" placeholder="请搜索工况名" @blur="searchCondition" style="margin-left:20px ;"> </el-input><el-input v-model="searchName1" placeholder="请搜索测点名" @change="searchTest" style="margin-left:20px ;"> </el-input><div style="display: flex;margin: 20px 0px 0px 10px;"><div class="condition"><div class="top">工况名</div><div class="bottom"><div @click="actvied(index)" :class="[activeIndex == index ? 'color' : '', 'item']"v-for="(item, index) in tableList" :key="index">{{ item.datafile }}</div></div></div><div class="test"><div class="top1">测点名</div><div class="bottom1"><div @click="handlePointClick(index)":class="[selectedPointIndex == index ? 'color1' : '', 'item1']"v-for="(point, index) in TestList" :key="index">{{ point.testpointname }}</div></div></div><div v-loading="loading" element-loading-text="拼命加载中"element-loading-background="rgba(122, 122, 122, 0.8)" ref="chart"style="width:120%;margin-left: 50px;"></div></div>tableList:[],tableData: [],TestList:[],pointData: [],searchName:'',searchName1:'',// 搜索工况名async searchCondition(){const filteredData = this.tableData.filter(item => item.datafile === this.searchName);this.tableList = filteredData.length > 0 ? filteredData : this.tableData;},// 搜索测点名async searchTest(){const filteredData = this.pointData.filter(item => item.testpointname === this.searchName1);this.TestList = filteredData.length > 0 ? filteredData : this.pointData;},

二，调接口查询

<el-input v-model="searchTaskName" placeholder="按型号搜索" class="input" 
style="width: 30%; margin: 10px;"@change="searchProjects"></el-input>
// 搜索卡片async searchProjects() {const data  =  await GetAllTestProject({modelname:this.searchTaskName} )this.cardData = data.data.data.testProjects},